如何使用$ transition $ .params更改状态参数的值

时间:2018-05-21 17:47:35

标签: angularjs angular-ui-router

我使用state定义了$stateProvider,如下所示:

(function() {
    'use strict';

    angular.module('app').config(stateConfig);

    function stateConfig($stateProvider) {
        $stateProvider
        .state('baseInformation', {
            parent: 'panel',
            url: 'baseInformation',
            params: {
                backFilters: null
            },
            views: {
                'panel': {
                    templateUrl: 'baseInformation.html',
                    controller: 'BaseInformationController',
                    controllerAs: 'vm'
                }
            }
        });
    }
})();

在另一个控制器中,我使用$state.go('baseInformation', {backFilters: 12})。现在我想用这样的代码更改backFilters参数的值:

(function () {
    'use strict';

    angular.module('app').controller('BaseInformationController', BaseInformationController);

    function BaseInformationController($transition$, CommonUtils) {
        var vm = this;

        // updated question
        CommonUtils.checkParamtersAndLog($transition$);
        $transition$.params().backFilters = 20;

        // updated question
        CommonUtils.checkParamtersAndLog($transition$);
    }
})();

但我得到以下错误:

TypeError:无法分配给对象'#'的只读属性'backFilters'

我也搜索过这个问题,但没有找到任何办法,这对我来说非常关键。

更新

我在服务中使用$transition$.params().backFilters基于它的价值,可能是这样的:

(function () {
    'use strict';
    angular.module('app').factory('CommonUtils', CommonUtils);

    function CommonUtils() {

        var service = {
            checkParamtersAndLog: checkParamtersAndLog
        };

        function checkParamtersAndLog(transition) {
            if(transition.params().backFilters == null) {
                console.log('backFilters is null');
            }
            else {
                console.log('backFilters is not null')
            }
        }

        return service;
    }
})();

并希望从控制器更改$transition$.params().backFilters值。

1 个答案:

答案 0 :(得分:0)

您可以通过将一些setter / getter函数存储在CommonUtils服务中的backFilters参数值来处理这个问题。

(function () {
    'use strict';
    angular.module('app').factory('CommonUtils', CommonUtils);

    function CommonUtils() {
        var backFilters = null;

        var service = {
            checkParamtersAndLog: checkParamtersAndLog.
            setBackFilters: setBackFilters,
            getBackFilters: getBackFilters
        };

        function checkParamtersAndLog() {
            if(backFilters == null) {
                console.log('backFilters is null');
            }
            else {
                console.log('backFilters is not null')
            }
        }

        function setBackFilters(backFilterValue) {
            backFilters = backFilterValue;
        };

        function getBackFilters() {
            return backFilters;
        };

        return service;
    }
})();  

然后您可以像这样更改控制器:

(function () {
    'use strict';

    angular.module('app').controller('BaseInformationController', BaseInformationController);

    function BaseInformationController($transition$, CommonUtils) {
        var vm = this;
        CommonUtils.setBackFilters($transition$.params().backFilters);

        // updated question
        CommonUtils.checkParamtersAndLog();
        CommonUtils.setBackFilters(20);

        // updated question
        CommonUtils.checkParamtersAndLog();
    }
})();

如果你想在离开状态时将值重置为null,请将其添加到状态提供者:

onExit: function() { 
    CommonUtils.setBackFilters(null);
}