Angular ui-rotuer $state.go not changing state?

Question

I have a factory I have created that will check if a state change is happening and if a form is dirty. If the form is dirty a modal will appear similar to a confirm window. My issue is that the $state.go() is not working. I am at a loss as to why:

(function() {

    var checkStateChangeService = function ($rootScope, $modal) {

        var addCheck = function ($scope, form, $state) {

            var modalInstanceCtrl = function ($scope, $modalInstance) {
                $scope.ok = function () {
                    $modalInstance.close();
                };

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

            var removeListener = $rootScope.$on('$stateChangeStart',  function (event, toState, toParams, fromState, fromParams) {


                if (form.$pristine) {
                    return;
                }


                event.preventDefault();
                var message = "There are unsaved changes, do you want to continue?";
                var title = "Unsaved Changes";

                var modalHtml = "<div class=\"panel\">\r\n";
                modalHtml += "<h4 class=\"center\" id=\"modalTitle\">" + title + "<\/h4>\r\n";
                modalHtml += "<div class=\"small-12 columns\">\r\n";
                modalHtml += "<div class=\"modal-body\">" + message + "<\/div>";
                modalHtml += "<div class=\"button-box\">\r\n";
                modalHtml += "<button ng-click='ok()' class=\"tiny\">OK<\/button>\r\n";
                modalHtml += "<button ng-click='cancel()' class=\"tiny\">Cancel<\/button>\r\n";
                modalHtml += "<\/div>\r\n";
                modalHtml += "<\/div>\r\n";
                modalHtml += "<\/div>";

                var modalInstance = $modal.open({
                    template: modalHtml,
                    controller: modalInstanceCtrl
                });

                modalInstance.result.then(function () {
                    $state.go(toState);
                }, function () {
                    $state.go(fromState);
                });

            });

            $scope.$on("$destroy", removeListener);
        };

        return { checkFormOnStateChange: addCheck};
    }

    var module = angular.module("traApp");
    module.service("checkStateChangeService", checkStateChangeService);
}());  

I am not seeing any errors and not sure why this is an issue. I have seen several examples very similar to mine.

Answer 1

我发现this question帮助我解决了这个问题。我看到的唯一一个小问题是状态改变后模态关闭。看起来很奇怪，但它确实有效。 AvijitGupta，实际上让我思考，因为看起来状态似乎没有改变。

(function() {

    var checkStateChangeService = function ($rootScope, $modal) {

        var addCheck = function ($scope, form, $state) {

            var _this = this;

            var modalInstanceCtrl = function ($scope, $modalInstance) {
                $scope.ok = function () {
                    $modalInstance.close();

                };

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

            var removeListener = function (event, toState, toParams, fromState, fromParams) {


                if (form.$pristine) {
                    return;
                }

                _this.toState = toState;
                _this.toParams = toParams;

                var message = "There are unsaved changes, do you want to continue?";
                var title = "Unsaved Changes";

                var modalHtml = "<div class=\"panel\">\r\n";
                modalHtml += "<h4 class=\"center\" id=\"modalTitle\">" + title + "<\/h4>\r\n";
                modalHtml += "<div class=\"small-12 columns\">\r\n";
                modalHtml += "<div class=\"modal-body\">" + message + "<\/div>";
                modalHtml += "<div class=\"button-box\">\r\n";
                modalHtml += "<button ng-click='ok()' class=\"tiny\">OK<\/button>\r\n";
                modalHtml += "<button ng-click='cancel()' class=\"tiny\">Cancel<\/button>\r\n";
                modalHtml += "<\/div>\r\n";
                modalHtml += "<\/div>\r\n";
                modalHtml += "<\/div>";

                var modalInstance = $modal.open({
                    template: modalHtml,
                    controller: modalInstanceCtrl
                });

                modalInstance.result.then(function () {

                    onRouteChangeOff();                    
                    $state.go(_this.toState.name, _this.toParams);
                }, function (error) {

                });

                event.preventDefault();
            };

            var onRouteChangeOff = $rootScope.$on('$stateChangeStart', removeListener);

       };

        return { checkFormOnStateChange: addCheck};
    }

    var module = angular.module("traApp");
    module.service("checkStateChangeService", checkStateChangeService);
}());