【发布时间】:2017-03-19 20:14:53
【问题描述】:
我正在尝试使用 ui-routing 创建角度模态向导。在我的模态窗口中,我有两个嵌套视图,它们应该负责通过 ui-sref 指令在模态窗口内导航。虽然我在我的应用声明中添加了“ui.bootstrap”和“ui.router”模块,但当我单击应该在控制台上打开整个模式的按钮时出现错误:
"TransitionRejection(type: 6, message: 转换错误,详情:
错误:[$injector:unpr] 未知提供者:$modalProvider
app.js:
/* definition of angularJS application and include modules*/
var app = angular.module('accTrader', [
'ui.router', 'ui.bootstrap', 'LocalStorageModule', 'duScroll', 'ngTouch'
]);
// routing config
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state("home", {
url: "/",
template: '<button class="btn btn-default" ui-sref="modal"> Modal</button>',
controller: 'MainCtrl'
})
.state("aboutus", {
url: "/aboutus",
templateUrl: "app/views/aboutus.html"
})
.state("category", {
url: "/category/gameid/:gameid",
controller: 'CategoryCtrl',
templateUrl: 'app/views/category.html'
})
.state('modal', { // MODAL
parent: 'home',
url: '/modal',
onEnter: ['$modal', '$state', function($modal, $state) {
console.log('Open modal');
$modal.open({
template: '<button class="btn btn-danger" ui-sref="signin"> sign-in </button> <button ui-sref="signout" class="btn btn-success"> sign-out </button> <div ui-view="modal"></div>',
backdrop: false,
windowClass: 'right fade'
}).result.finally(function() {
$state.go('list');
});
}]
})
.state('signin', {
url: '/signin',
parent: 'modal',
views: {
'modal@': {
template: '<p>sign-in</p>'
}
}
})
.state('signout', {
url: '/signout',
parent: 'modal',
views: {
'modal@': {
template: '<p>sign-out</p>'
}
}
})
}); // END ROUTING CONFIG
index.html 的主要部分:
...
<body ng-cloak id="top" ng-controller="ExternalCtrl">
<div ui-view></div>
<a href="#top" du-smooth-scroll="">
<div id="backToTop" class="bottomMenu hide"></div>
</a>
...
【问题讨论】:
标签: javascript angularjs angular-ui-router