我正在尝试使用角度ui路线和角度ui模态制作状态模态.
假设我想填写一个包含4页的注册表单.所有这些页面都是模态的.
我能够在状态变化上打开模态.但之后我想在国家的基础上打开模态的每一页.
$stateProvider.state('signup',{
url: '/signup',template: '<ui-view />',abstract: true
})
.state('signup.modal',{
url: '',resolve: {
modalInstance: function($modal) {
return $modal.open({
template: '<div ui-view="modal"></div>',controller: 'signUp',windowClass: 'signup-edit-modal',backdrop: 'static'
})
}
},onEnter: ['modalInstance','$timeout','$state',function(modalInstance,$timeout,$state) {
modalInstance.opened.then(function(status){
if(status){
$timeout(function(){
// changing color of background / backdrop of modal for signup
angular.element('.reveal-modal-bg').css('backgroundColor','rgba(255,255,.9)');
})
}
})
$state.go('signup.welcome')
}],onExit: function(modalInstance) {
modalInstance.close('dismiss');
angular.element('.reveal-modal-bg').css('backgroundColor','rgba(0,0.45)');
}
})
.state('signup.welcome',{
url: "/welcome",views: {
modal: {
templateUrl: 'main/signup/welcome.html',controller: 'signupWelcome'
}
}
}).state('signup.step1',{
url: "/step1",views: {
modal: {
templateUrl: 'main/signup/step1.html',controller: 'signupStep1'
}
}
})
上面的代码能够打开模态,它也会将状态更改为welcome,但由于某种原因,模板未加载到模态中.
我已经将模板分配给它应该打开但未打开的ui-view =模态.
请帮我.提前致谢
解决方法
我终于能够在国家的基础上查看模态.我同意@Obi Onuorah的观点,即模态的概念是保持状态并按要求执行某些操作.但是如果你需要在状态的基础上显示模态,那么它是可能的.
感谢angular-ui路线的精彩文件
https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names—relative-vs-absolute-names
它精美地解释了ui-view的绝对命名与相对命名之间的差异.
这是UI路由的示例代码
$stateProvider
.state('list',{
url: '/',template: '<ul><li ng-repeat="test in testObj"><a ui-sref="view({id: test.id})">{{ test.name }}</a></li></ul>',controller: function($scope) {
$scope.testObj = testObj;
}
})
.state('modal',{
abstract: true,parent: 'list',url: '',onEnter: ['$modal',function($modal,$state) {
console.log('Open modal');
$modal.open({
template: '<div ui-view="modal"></div>',backdrop: false,windowClass: 'right fade'
}).result.finally(function() {
$state.go('list');
});
}]
})
.state('view',{
url: ':id',parent: 'modal',views: {
'modal@': {
template: '<h1>{{ test.name }}</h1><br />\
<a ui-sref="edit({id: test.id})">Edit</a><br />\
<a href="#" ng-click="$close()">Close</a>',controller: function($scope,test) {
$scope.test = test;
},resolve: {
test: function($stateParams) {
return testObj[$stateParams.id];
}
}
}
}
})
.state('edit',{
url: ':id/edit',views: {
'modal@': {
template: '<h1>Edit {{ test.name }}</h1><br /> \
<a ui-sref="view({id: test.id})">View</a> <br />\
<a href="#" ng-click="$close()">Close</a>',resolve: {
test: function($stateParams) {
return testObj[$stateParams.id];
}
}
}
}
});
我做了一个简单的plunker.
http://plnkr.co/edit/hw9x7B?p=preview
