Angularjs 从控制器内检测ui路由器状态变化并相应关闭模式

我使用$Modal.open{…}方法打开一个UI引导模式。当用户按下后退按钮时，我需要关闭此按钮

在这种情况下，open方法返回的结果承诺没有用处，因为它无法检测到由于back按钮而导致的状态更改。现在，当按下后退按钮时，状态改变，但模式保持打开状态

基本上，我有一个确切的问题，但即使它有一个选定的答案，问题并没有得到解决，从评论中可以看出。与此类似，但也无法解决后退按钮问题

我需要一些方法来检测控制器中的当前状态是否已更改，并调用$modalInstance.close或$scope.$close方法

我可以监听$stateChangeStart事件并检查fromState参数以有条件地关闭模式。但随后的所有状态更改都会不必要地触发此事件

更新：所以我试着监听这个事件，并在它第一次被触发时取消它的注册。这样我就可以监听后退按钮的状态变化，然后在需要时停止。模态状态的最终代码如下所示：

$stateProvider.state('itemList.itemNew', {
    url: '/new',
    onEnter: function($state, $modal) {
        $modal.open({
            templateUrl: "/static/partials/item/form.html",
            controller: function($http, $scope, $modalInstance) {
                $scope.editableItem = {};
                $scope.saveItem = function(item) {
                    $http.post('/api/item', item)
                    .success(function(data) {
                        $modalInstance.close(data);
                        alert("Saved Successfully");
                    }).error(function(data) {
                        alert("There was an error.");
                    });
                };
                //Register listener specifically for the back button :(
                deRegister = $scope.$on('$stateChangeSuccess', 
                    function(event, toState, toParams, fromState, fromParams) {
                        if (toState.name === 'itemList' && 
                            fromState.name === 'itemList.itemNew') {
                            $modalInstance.close();//Close the modal
                            deRegister();//deRegister listener on first call
                        }
                    }
                );
            }
        }).result.then(function() {
            //Promise Resolved, Modal Closed.. So reload
            $state.go("^", null, {
                "reload": true
            });
        }, function() {
            //Promise Rejected, Modal Dismissed.. no reload
            $state.go("^");
        });
    },
});

---

我仍然认为应该有更好的办法。显然决定从ui引导中完全转储modal.js。我是否应该做同样的事情，并简单地使用简单的引导CSS呈现模式？我需要解决同样的问题。也许是一个稍微不同的设置，但我相信它可能适合你

我使用的是angular modal服务，我相信它无论如何都是在引导上运行的

在模态控制器内部，我使用了以下内容：

$scope.$on('$stateChangeStart', function() {
    $scope.stateChange();
});

$scope.stateChange = function() {
    //  Manually hide the modal using bootstrap.
    $element.modal('hide');
    //  Now close as normal, but give 500ms for bootstrap to animate
    close('', 500);
};

第二个功能只是根据下面的手动方式退出模式。我不想在按钮上使用“数据解除”属性，如何手动关闭模式？。它说：

您所需要做的就是获取控制器中的模态元素，然后调用引导模态函数来手动关闭模态。然后正常调用close函数

---

因此，现在，如果发生状态更改，包括用户启动的后退按钮单击，则模式会优雅地拉开拉链。

我需要解决同样的问题。也许是一个稍微不同的设置，但我相信它可能适合你

我使用的是angular modal服务，我相信它无论如何都是在引导上运行的

在模态控制器内部，我使用了以下内容：

$scope.$on('$stateChangeStart', function() {
    $scope.stateChange();
});

$scope.stateChange = function() {
    //  Manually hide the modal using bootstrap.
    $element.modal('hide');
    //  Now close as normal, but give 500ms for bootstrap to animate
    close('', 500);
};

第二个功能只是根据下面的手动方式退出模式。我不想在按钮上使用“数据解除”属性，如何手动关闭模式？。它说：

您所需要做的就是获取控制器中的模态元素，然后调用引导模态函数来手动关闭模态。然后正常调用close函数

现在，如果状态发生变化，包括用户启动的后退按钮单击，则模式会优雅地拉开拉链