我正在使用angular-ui打开和关闭模态.当我用提交(对象)或解除(消息)关闭它时,对话框关闭,但屏幕仍然显示为灰色,我无法访问我的应用程序.一些代码：
父控制器(相关部分)：
$scope.deleteConfirm = function(toDelete) {
console.log(toDelete);
var modalObj = {
templateUrl: 'views/templates/delete.html',controller: 'DeleteCtrl',size: 'sm',resolve: {
toDelete: function() {
return toDelete;
},collection: function() {
return $scope.users;
}
}
}
var modalInstance = $modal.open(modalObj);
modalInstance.result.then(function (deletedItem) {
console.log(deletedItem);
});
};
父html：
<button class="btn btn-danger btn-xs" ng-click="deleteConfirm(user)">X</button>
模态控制器：
.controller('DeleteCtrl',['$scope','$modalInstance','toDelete','collection',function ($scope,$modalInstance,toDelete,collection) {
$scope.toDelete = toDelete;
$scope.remove = function() {
collection.$remove(toDelete).then(function(ref) {
$modalInstance.close(ref);
});
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}]);
模态模板：
<div class = "ll-modal">
<div class="modal-header">
<h3 class="modal-title">Confirm Delete</h3>
</div>
<div class="modal-body">
Are you sure you want to delete this item? It will be gone forever.
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="remove()">Delete Permanently</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
当modal与ng-animate的1.4.x角度版本一起使用时,似乎存在问题.由于ng-animate在转换完成后只是懒惰地移除DOM元素,因此该流程中存在某些中断.你可以通过在模态设置中关闭动画来快速修复它.有一个问题
logged in Github表示ui bootstrap尚未完全正式支持1.4.x.
var modalObj = {
templateUrl: 'views/templates/delete.html',animation: false,//<-- Turn off
resolve: {
toDelete: function() {
return toDelete;
},collection: function() {
return $scope.users;
}
}
}
或者只是全局关闭它：
app.config(function($modalProvider) {
$modalProvider.options.animation = false;
});
更新
如果您按照上面提供的github链接,您可以看到它已在最新版本的ui bootstrap中修复,即upgrade of 0.13.3或更高版本将解决该问题.
