angular js - 在 angular material switch change 事件上更新 $stateParams

Question

我想知道是否可以在 angular material switch

的更改事件后更新 $stateParams 参数

<section id="app_controls">
    <span style="margin-right: 10px;">Ro</span>
    <md-switch  class="md-primary" 
               ng-model = "data.lang"
               aria-label="Switch language" 
               ng-true-value="'en'" 
               ng-false-value="'ro'"
               ng-change="setLang(data.lang)"
    >En</md-switch>
    <span id="exit"></span>
</div>  
</section>

控制器

.controller('homeController', ['$stateParams','$state', '$scope', 'PageProperties', 'loadMyData',
            function($stateParams, $state, $scope, PageProperties, loadMyData){     


    //set page elements 
    var properties = PageProperties.setProps("home", loadMyData);
    $scope.props = properties;
    $scope.lang;

    $scope.setLang = function(lang) {           
        $scope.message = lang;
      };
}])

route.js

.state('home', {
            url: '/home?lang',
            params: { lang: 'ro'},
            templateUrl: 'views/home/home.html',
            controller: 'homeController',//'homeController'
            resolve:{
                    //loadResources e doar o denumire, nu vreun key-word
                      loadResources: ['$ocLazyLoad', function($ocLazyLoad) {
                          // you can lazy load files for an existing module
                          //conteaza ordinea in care le scriu
                                 return $ocLazyLoad.load(['pageNavPropsService', 'homeCtrl','homeDirective']);
                       }],
                       loadMyData: ['$stateParams', 'GetDataService', function($stateParams, GetDataService){
                           //get innitial data for states
                           var path = '_global/views/services/json/' + $stateParams.lang + '_data.json';
                           return  GetDataService.getData(path);
                       }]
            }
        })

除了 setLang() 函数内部的 $scope 之外，我无法从控制器访问任何其他内容。

我想要实现的是进行语言切换，这将更新状态参数 lang - 我希望它在状态更改时对于任何其他状态都保持不变。另外我想在参数更改后重新加载此状态。

我怎样才能做到这一点？

Answer 1

基本上，您可以在$rootScope 中引用语言。

正在更新您的代码，它可能如下所示：

控制器

.controller('homeController', ['$stateParams','$state', '$scope', 'PageProperties', 'loadMyData', '$rootScope', 
            function($stateParams, $state, $scope, PageProperties, loadMyData, $rootScope){     


    //set page elements 
    var properties = PageProperties.setProps("home", loadMyData);
    $scope.props = properties;


    $scope.setLang = function(lang) {           
        $rootScope.lang = lang;
      };
}])

route.js

.state('home', {
    url: '/home?lang',
    params: { lang: 'ro'},
    templateUrl: 'views/home/home.html',
    controller: 'homeController',//'homeController'
    resolve:{
            //loadResources e doar o denumire, nu vreun key-word
              loadResources: ['$ocLazyLoad', function($ocLazyLoad) {
                  // you can lazy load files for an existing module
                  //conteaza ordinea in care le scriu
                         return $ocLazyLoad.load(['pageNavPropsService', 'homeCtrl','homeDirective']);
               }],
               loadMyData: ['$stateParams', '$rootScope', 'GetDataService', function($stateParams, $rootScope, GetDataService){
                   //get innitial data for states
                   var path = '_global/views/services/json/' + $rootScope.lang + '_data.json';
                   return  GetDataService.getData(path);
               }]
    }
})

此外，要设置默认语言，您可以在 app.run 中存储您的语言的默认值。

Answer 2

最后我用这样的服务完成了它：

.factory('langService', function() {
        var default_lang = "ro";
        var setLang = function(lang){
            if(!lang)
                this.language = default_lang;
            else
                this.language = lang;
            };
        var getLang = function(){   
            if(!this.language)
                return this.language = default_lang;
            else
                return this.language;
        }

        return {
            setLang : setLang,
            getLang: getLang
        }
    })

并处于解析状态：

resolve:{
    loadResources: ['$ocLazyLoad', function($ocLazyLoad) {
                                 return $ocLazyLoad.load(['pageNavPropsService', 'gourmetCtrl' ,'customHeader', 'customFooter']);
    }],
    loadMyData: ['$stateParams', 'GetDataService', 'langService', function($stateParams, GetDataService, langService){
               var path = '_global/views/services/json/' + langService.getLang() + '_data.json';
               return  GetDataService.getData(path);
            }]
    }

angular js - 在 angular material switch change 事件上更新 $stateParams

angular js - update $stateParams on angular material switch change event

angularjs

angularjs-scope

angular-ui-router

angular-material