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

Question

I want to know if is a way of updating a $stateParams parameter after a change event of an angular material switch

<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

.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 initial data for states
                           var path = '_global/views/services/json/' + $stateParams.lang + '_data.json';
                           return  GetDataService.getData(path);
                       }]
            }
        })      

I cannot access anything else from the controller except $scope inside of setLang() function.

What I'm trying to achieve is to have a language switch which will update the state parameter lang - which I hope it will remain the same for any other state on state change. Also I want to reload this state after the parameter has changed.

How can I achieve that?

Answer 1

Finally I've done it with a service like this:

.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
        }
    })

and in state resolve:

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);
            }]
    }

Answer 2

Basically, you can reference language in $rootScope.

Updating your code, it could look like this:

controller

.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);
               }]
    }
})

Also, to set a default language, in your app.run, you can store the default value for your language.