3

我正在尝试将 ui.bootstrap 注入我的模块,称为“app”。我已经将 ui-bootstrap javascript 文件包含到了我的 html 中,但是无论我做什么都会出现以下错误:

Uncaught Error: [$injector:modulerr] 

如果我删除对 ui.bootstrap 的任何依赖项,错误就会消失。

head 标签中的 js 导入顺序,所有这些都加载正常。(在 Chrome 开发工具中检查)

<script src="/Scripts/angular.min.js"></script>
<script src="/Scripts/angular-route.js"></script>
<script src="/Scripts/angular-ui-router.min.js"></script>
<script src="/Scripts/angular-animate.js"></script>
<script src="/Scripts/ui-bootstrap-tpls-1.2.5.min.js"></script>

当前的 AngularJS 版本是 1.5.2

应用程序.js

(function () {
    'use strict';

    var app = angular.module('app', [
        // Angular modules
        'ngRoute',
        'ngAnimate',
        'ui.bootstrap',
        // Custom modules
        // 3rd Party Modules
        'ui.router'
    ]);

    app.config(['$locationProvider', '$stateProvider', '$urlRouterProvider', '$modal', function ($locationProvider, $stateProvider, $urlRouterProvider, $modal) {
        $locationProvider.html5Mode(true);

        $urlRouterProvider.otherwise('/');
        $stateProvider
            .state('home', {
                url: '/',
                controller: 'frontpageController',
                templateUrl: 'app/views/frontpage.html',
                data: {
                    authorize: false 
                }
            })
            .state('login', {
                url: '/login',
                controller: 'loginController',
                templateUrl: 'app/views/login.html',
                data: {
                    authorize: false
                }
            })
            .state('profile', {
                url: '/profile/:userId',
                controller: 'profileController',
                templateUrl: 'app/views/profile.html',
                data: {
                    authorize: true
                }
            })
            .state('error', {
                url: '/error',
                controller: 'errorController',
                templateUrl: 'app/views/404.html',
                data: {
                    authorize: false
                }
            })
    }]);

    app.run(function ($rootScope, loginService) {
        $rootScope.$on('$stateChangeStart', function (event, toState, toParams) {
            var authorize = toState.data.authorize;

            if (authorize && typeof $rootScope.currentUser === 'undefined') {
                event.preventDefault();
                // get me a login modal!
                loginService()
            }
        });

    });

})();
4

4 回答 4

2

您不能在模块配置中注入服务,它只允许提供者。 $modal也被重命名为$uibModal最后一个 ui-bootstrap (在你的控制器中重命名)。

所以从你的 .config 中删除 '$modal' 只有在你使用它时才注入它。

于 2016-03-29T14:17:04.267 回答
0

你确定 ui bootstrap 只有一个 JS 文件吗?检查 ui bootstrap 的所有文件夹,如果您缺少任何其他 JS 文件,请添加。

于 2016-03-29T13:49:33.030 回答
0

您必须添加tplslibraryfor ui bootstrap。例如:

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.5/ui-bootstrap-tpls.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.5/ui-bootstrap.js"></script>
于 2016-03-29T13:50:41.433 回答
0

它可能是您的角度版本。它在网站上说需要 AngularJS 1.4.x 或更高版本。

于 2016-03-29T14:02:37.510 回答