我正在使用ui-router在我的angularjs应用程序和ui-bootstrap for UI中进行路由。在我的应用程序中进入状态我打开一个uibmodal,它基本上返回一个uibmodalinstance但是当我使用
更改状态时$state.go('dashboard')
在我的控制器内部,它正在改变状态,但没有关闭模态。 所以我希望模态在退出状态时关闭。 我编写了以下代码,但代码的某些部分并不起作用。 请参阅编码和非工作部分的评论
$stateProvider.state('makeabid',{
parent: 'dashboard',
url: '/makeabid/{id}',
data: {
authorities: ['ROLE_USER'],
pageTitle: 'global.menu.makeabid'
},
onEnter: ['$stateParams', '$state', '$uibModal', function($stateParams, $state, $uibModal) {
$uibModal.open({
templateUrl: 'app/dashboard/makeabid/makeabid.html',
controller: 'MakeabidController',
controllerAs: 'vm',
backdrop: true,
size: 'lg'
}).result.then(function () {
$state.go('dashboard');
});
}]
//this part doesnt work
,onExit:['$uibModalInstance','$stateParams', '$state',function ($uibModalInstance,$stateParams, $state) {
$uibModalInstance.close();
}]
});
我的控制器编码如下: -
MakeabidController.$inject = ['$stateParams','$state','$uibModalInstance','MakeabidService'];
function MakeabidController( $stateParams, $state, $uibModalInstance, MakeabidService) {
var vm = this;
loadAll();
vm.clear = clear;
vm.save = save;
function clear () {
$uibModalInstance.close();
}
function save() {
// console.log(vm.comparableData);
}
function loadAll() {
vm.comparableData = MakeabidService.getobject();
if(angular.isUndefined(vm.comparableData)){
//$uibModalInstance.close(); //It doesn't work
$state.go('dashboard'); //This is working
}
}
}
AnyOne请告诉我关于更改状态的关闭uibmodal的解决方案
答案 0 :(得分:2)
我通过在我的app.run中添加$ uibModalStack.close()解决了该问题
function run($uibModalStack) {
$rootScope.$on('$stateChangeStart', function() {
$uibModalStack.dismissAll();
});
}
答案 1 :(得分:0)
您可以点按某些$stateProvider
个活动。
我在我的一个应用程序中做了类似的事情(在coffeescript中,但你明白了)
@$scope.$on '$stateChangeStart', (e, to, top, from, fromp) =>
@$uibModalInstance.close()
基本上,在处理模态的控制器中,您将观察$stateChangeStart
事件,当您捕获它时,您可以关闭模态。
请参阅https://github.com/angular-ui/ui-router/wiki,特别是状态变更事件
部分--- --- EDIT
我刚刚注意到这些调用已被弃用。如果您使用的是UI-Router > 1.0
,则此处提供了一些有关如何迁移的文档:https://ui-router.github.io/guide/ng1/migrate-to-1_0#state-change-events