无法使用UI-Router加载模板

时间:2016-02-03 20:14:10

标签: angularjs angular-ui-router angular-ui-bootstrap

在我的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.bootstrapui.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路由器中的模板缓存?

0 个答案:

没有答案