AngularJS、AngularUi（引导程序）和 NgRoute
Posted
技术标签:
【中文标题】AngularJS、AngularUi（引导程序）和 NgRoute【英文标题】：AngularJS, AngularUi (Bootstrap) and 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 后，有问题的功能似乎正常工作。也许您通过删除模板缓存来破坏该功能？
【参考方案1】：
可能是因为您在“staffPanelApp”上创建了控制器，但您的 ngApp 被称为 myApp？
【讨论】：
以上是关于AngularJS、AngularUi（引导程序）和 NgRoute的主要内容，如果未能解决你的问题，请参考以下文章