无法将 ui.bootstrap 注入我的模块
Cannot inject ui.bootstrap into my module
我正在尝试将 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
app.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()
}
});
});
})();
你确定ui bootstrap 只有一个 JS 文件吗?检查 ui bootstrap 的所有文件夹,如果您缺少任何其他 JS 文件,请添加。
您必须为 ui bootstrap
添加 tpls
和 library
。例如:
<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>
可能是您的 angular 的版本。它在网站上说需要 AngularJS 1.4.x 或更高。
您不能在模块配置中注入服务,它只允许提供者。
$modal
在上次 ui-bootstrap 中也被重命名为 $uibModal
(在您的控制器中重命名)。
因此,从您的 .config 中删除“$modal”,仅在您使用它时注入它。
我正在尝试将 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
app.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()
}
});
});
})();
你确定ui bootstrap 只有一个 JS 文件吗?检查 ui bootstrap 的所有文件夹,如果您缺少任何其他 JS 文件,请添加。
您必须为 ui bootstrap
添加 tpls
和 library
。例如:
<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>
可能是您的 angular 的版本。它在网站上说需要 AngularJS 1.4.x 或更高。
您不能在模块配置中注入服务,它只允许提供者。
$modal
在上次 ui-bootstrap 中也被重命名为 $uibModal
(在您的控制器中重命名)。
因此,从您的 .config 中删除“$modal”,仅在您使用它时注入它。