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?

Do you have any particular reason to not save language in rootScope. So, you dont have to update state params everytime a user changes a language. Also, that means you are saving overhead of managing your language variable in your router. — ankitjain11
– ankitjain11, Commented Aug 8, 2016 at 13:07
I don't think so - I'm a newbie in angular so this is how I thinked it could be done - but I'm stuck now. How can it be done with your variant? — sTx
– sTx, Commented Aug 8, 2016 at 13:14

ankitjain11 · Accepted Answer · 2016-08-08 14:36:11Z

1

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.

edited Aug 8, 2016 at 14:36

answered Aug 8, 2016 at 13:59

ankitjain11

2532 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

sTx Over a year ago

If I insert rootSCope in routes config gives me this error: angular-1.5.8.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module NimbusApp due to: Error: [$injector:modulerr] Failed to instantiate module routesJs due to: Error: [$injector:unpr] Unknown provider: $rootScope

sTx Over a year ago

what is the best way of handling a language option for an app, give it that I need the language for fetching data?

ankitjain11 Over a year ago

Also, the best way of handling language is a bit opinionated. If I were to go, I would go with $rootScope or some service. This is because, If I had language variable in url, and the url gets modified or played with, it can bring the application crashing down.

ankitjain11 Over a year ago

I've updated my code, as per the answer. Sorry, overlooked the DI.

sTx Over a year ago

Yeah, I did it by removing url formatting and params from state and injecting rooscope in run

|

sTx · Accepted Answer · 2016-08-09 06:55:51Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related