sTx sTx - 3 months ago 37
AngularJS Question

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

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


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

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

How can I achieve that?

Answer

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.