AngularJS、AngularUi（引导程序）和 NgRoute答案

【问题标题】：AngularJS, AngularUi (Bootstrap) and NgRouteAngularJS、AngularUi（引导程序）和 NgRoute
【发布时间】：2015-09-30 14:34:03
【问题描述】：

我正在使用 AngularJS 1.4.1、ngRoute 1.4.1 和 https://angular-ui.github.io/bootstrap/

基础结构是

<html ng-app="myApp">
  <base href="/">
  <body>
    <div ng-view></div>
  </body>
</html>

我使用 ngRoute 将我网站的每个页面（例如 about、contact us 等）加载到带有 ng 视图的 div 中。

当页面被加载到ng视图时使用

var myApp = angular.module('myApp', ['ngRoute', 'ngProgress', 'ui.bootstrap']); 

myApp.config(function($routeProvider,$locationProvider){$routeProvider
.when('/about',{templateUrl:'about.php',controller:'mainController'})
.otherwise({redirectTo:'/'});
                                                        
staffPanelApp.controller('mainController', function($scope, $route, $routeParams, $location, $templateCache, ngProgress) {
  $templateCache.removeAll();
  ngProgress.start();
  $scope.$route = $route;
  $scope.$location = $location;
  $scope.$routeParams = $routeParams;
  ngProgress.complete();
});

诸如警报之类的 ui 引导功能应该可以工作，但它似乎在 ngview 中不起作用，它似乎只有在我将它添加到主基本页面时才起作用。有没有办法让它在 ngView 加载页面中工作？

Bootstrap UI 功能示例：

<alert type="success">This should work</alert>

更新： Plunker 但无法让 ngroute 工作，但基础在那里： http://plnkr.co/edit/Njg16e01Ocv1iC1qzn7A?p=preview

【问题讨论】：

你能发布一个 plunker/jsfiddle 吗？试试 ui-view？
我创建了一个 plunker，但我无法让 ngRoute 在链接上工作，但基础在那里 plnkr.co/edit/Njg16e01Ocv1iC1qzn7A?p=preview
怎么了 Bob，我的回答对你有帮助吗？
通过删除 HTML5Mode 和 $templateCache.removeAll(); 修改您的示例以使用 plunker 后，有问题的功能似乎正常工作。也许您通过删除模板缓存来破坏该功能？

标签： html angularjs twitter-bootstrap ngroute

【解决方案1】：

可能是因为您在“staffPanelApp”上创建了控制器，但您的 ngApp 被称为 myApp？

【讨论】：