$state.go 确认后不会更改角度路线答案

【问题标题】：$state.go won't change route in angular after confirmation$state.go 确认后不会更改角度路线
【发布时间】：2015-07-31 17:05:53
【问题描述】：

我有这段代码可以使用 angular-ui 路由器确认 Angular 导航：

$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
        //checks if campaign has been modified without save. 
        //if yes state change needs to be confirmed by modal
        //otherwise simple navigates away
        event.preventDefault();
        // var _this = this;
        _this.toState = toState;
        _this.toParams = toParams;

        var modalInstance = bootstrapModals.confirm({
            title: "Exit without saving?",
            message: "You have changes to the campaign. Leave without saving?"
        });
        modalInstance.then(function(result) {
            $state.go(_this.toState.name, _this.toParams);
        }, function(error) {
            event.preventDefault();
        });

    });

但是 $state.go 只是再次显示模态，没有任何路线变化。 _this.toState.name 和 _this.toParams 中的值是正确的。

有什么问题？

【问题讨论】：

尝试删除第一个event.preventDefault()
路线先变化后显示模态。不好。

标签： angularjs angular-ui-router angular-ui

【解决方案1】：

你有一个成功的无限循环。每次进行状态更改时，都会返回导致模态再次显示的代码。您需要保存答案以防止弹出模式。

【讨论】：

【解决方案2】：

它仍在监听 routeChange。所以我不得不这样做：

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

    function routeChange (event, toState, toParams, fromState, fromParams) {
        //checks if campaign has been modified without save. 
        //if yes state change needs to be confirmed by modal
        //otherwise simple navigates away

        // var _this = this;
        _this.toState = toState;
        _this.toParams = toParams;

        var modalInstance = bootstrapModals.confirm({
            title: "Exit without saving?",
            message: "You have changes to the campaign. Leave without saving?"
        });
        modalInstance.then(function(result) {
            //should stop listening to $stateChangeStart
            onRouteChangeOff ();
            $state.go(_this.toState.name, _this.toParams);
        }, function(error) {
            // event.preventDefault();
        });
        event.preventDefault();
    };

【讨论】：

【解决方案3】：

我花了一段时间才回家发布这个，抱歉。

我不确定 ModalInstance 是否会以同样的方式工作，但这是使用 good 'ol confirm 的代码：

 $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
    //checks if campaign has been modified without save. 
    //if yes state change needs to be confirmed by modal
    //otherwise simple navigates awa
    // var _this = this;
    _this.toState = toState;
    _this.toParams = toParams;

    var result = confirm('are you sure you want to leave unsaved?');
    if(!result) {
        event.preventDefault();
    }

});

先不阻止，成功时不要使用$state.go()，如果为false则只阻止。

您应该可以使用引导模式尝试类似的操作。

【讨论】：

【解决方案4】：

检查一下

bootstrapModals.confirm({
        title: "Exit without saving?",
        message: "You have changes to the campaign. Leave without saving?",
        callback: function(result) {
            if(result) {
                //yes
            }else {
                //no
            }
        }
    });

【讨论】：