javascript - 在 ui-bootstrap modal dismiss 上调用模态中定义的函数

Question

在我的 ui-bootstrap 模态 Controller 中，我 $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')"在模板中。