在我的index.html
我正在调用脚本ui-bootstrap-tpls.min.js
版本0.14.3及更低版本,angular-ui-router.min.js
版本0.2.15。
<!DOCTYPE html>
<html lang="pt-BR" ng-app="main">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="./favicon.ico">
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script type="text/javascript" src="./js/angular/main.js"></script>
<script type="text/javascript" src="./js/angular/controllers/carousels.js"></script>
</head>
<body ui-view="outside"></body>
</html>
在脚本main.js
中,我调用指令ui.bootstrap
和ui.router
。
var app = angular.module("main", [
"ui.bootstrap",
"ui.router"
]);
这就是我的路线:
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/home");
$urlRouterProvider.when("/", "/home");
$stateProvider.state("site", {
url: "/",
views: {
"outside@": {
templateUrl: "./pages/site/index/read.html"
}
}
}).state("home", {
parent: "site",
url: "home",
views: {
"inside@site": {
templateUrl: "./pages/site/home/read.html"
}
}
});
});
但当我进入任何页面以从 UI Bootstrap 的任何元素进行调用时,无论是工具提示还是轮播,都会返回一个错误,指出它无法加载模板。
这是在我开始使用 UI路由器之后开始的。
有谁知道如何解决这个问题?
我终于可以找出造成问题的原因了。
在脚本main.js
中,我使用以下代码清理模板缓存:
app.run(function($rootScope, $templateCache) {
$rootScope.$on("$stateChangeStart", function() {
$templateCache.removeAll();
});
});
这正是造成我所有问题的原因。 但是如何在 UI Bootstrap 停止工作的情况下清除 UI路由器中的模板缓存?