Question

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

＆＃13;

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');
        };
}]);

＆＃13;

当我解雇模态时，我想取消注册$ watch，当我在ng-click =＆＃34; closeModal（）＆＃34;在HTML中它工作正常。但是当我在模态外点击ESC时忽略模态时，它不起作用。那么有没有办法在解雇时调用我的注销功能。我知道modal.result.then（close（），dismiss（））;但如果没有必要，我不想把那个功能放到父范围内。

Answer 1

只需添加一个，然后使用result回调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)时，会返回一个对象，比如modalInstance，然后您可以在其上调用您的承诺回调。因此，承诺回调存在于与您modalInstance相同的上下文中，以及您可能通过options传递的任何数据。

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

在ui-bootstrap模态解除模式中定义的调用函数

2 个答案: