在 ui-bootstrap 模态关闭时调用模态中定义的函数

Question

在我的 ui-bootstrap 模态控制器中我 $watch 变量。它看起来像这样：

main.controller('modalCtrl', ['$scope', '$rootScope', '$modalInstance', 
    function ($scope, $rootScope, $modalInstance) {

        var unregister = $rootScope.$watch(function () { return $rootScope.someVariable; },
                          function (newVal) {
                              if (newVal == false) {
                                  $scope.closeModal();
                              }

                          });
        $scope.closeModal = function () {
            unregister();
            $modalInstance.dismiss('cancel');
        };
}]);

当我关闭模态时，我想取消注册 $watch，当我在 HTML 中的 ng-click="closeModal()" 上这样做时，它工作正常。但是，当我在 ESC 上单击模态外部时关闭模态时，它不起作用。那么有什么办法可以在解雇时调用我的取消注册功能。我知道 modal.result.then(close(),dismiss());但如果没有必要，我不想将该函数放入父级 $scope。

Answer 1

再添加一个回调到 result promise unregister:

main.controller('modalCtrl', ['$scope', '$rootScope', '$modalInstance', function ($scope, $rootScope, $modalInstance) {

    var unregister = $rootScope.$watch(function () {
        return $rootScope.someVariable;
    }, function (newVal) {
        if (newVal == false) {
            $scope.closeModal();
        }
    });

    $scope.closeModal = function () {
        $modalInstance.dismiss('cancel');
    };

    $modalInstance.result.then(null, unregister);
}]);

在这种情况下，unregister 将在 closeModal 和退出键上调用。顺便说一下，你可以把 $scope.closeModal 一起去掉，在模板中使用 ng-click="$dismiss('cancel')" 代替。

Answer 2

首先，您真的不应该在 $rootScope 上存储任何内容 - 特别是用于关闭模态的监视变量。你想通过一些监视变量关闭你的模态来解决什么问题（以及你想要完成什么用户体验）？这对我来说没有通过气味测试，而且您的预期设计有些奇怪。

其次，您关于不想使用已解决承诺的说法没有意义。当你调用 $modal.open(options) 时，那个 returns 一个对象，说 modalInstance 然后你调用你的承诺回调。因此，promise 回调存在于与您的 modalInstance 以及您可能通过 options.

传递的任何数据相同的上下文中

有关如何正确使用 $modal 服务的示例，请参阅我们的文档 here。

在 ui-bootstrap 模态关闭时调用模态中定义的函数

Call function defined in modal on ui-bootstrap modal dismiss

javascript

angularjs

angular-ui-bootstrap

bootstrap-modal