angularjs – $modalInstance对话框关闭,但屏幕仍然显示为灰色且

发布时间：2020-12-17 08:53:42 所属栏目：安全来源：网络整理

导读：我正在使用angular-ui打开和关闭模态.当我用提交(对象)或解除(消息)关闭它时,对话框关闭,但屏幕仍然显示为灰色,我无法访问我的应用程序.一些代码：父控制器(相关部分)： $scope.deleteConfirm = function(toDelete) {console.log(toDelete);var modalObj =

我正在使用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或更高版本将解决该问题.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!