how to change ionic ion-nav-view

Question

Im writing a mobile app using Ionic framework, it has two languages: English and Spanish, I want to be able to switch the nav-view (as a template), to show in English or Spanish depending on the user selection language.

I'm trying to do this on my StateProvider definition, here is part of my code:

      (function(){
        'use strict';

          angular

         .module('app.core')
         .config(['$stateProvider', '$urlRouterProvider',
          function($stateProvider, $urlRouterProvider) {

            $stateProvider

        .state('login', {
                url: '/login',
                templateUrl: 'app/auth/login/login.html',
                controller: 'LoginCtrl',
            })
        .state('loginEs', {
          url: '/loginEs',
          templateUrl: 'app/auth/login/loginEs.html',
          controller: 'LoginCtrl',
        })
        .state('tabs', {
          url: '/tab',
            abstract: true,
            templateUrl: 'templates/tabs.html'
          })

        .state('tabsEs', {
          url: '/tabEs',
            abstract: true,
            templateUrl: 'templates/tabsEs.html'
          })

        .state('tabs.dashboard', {
                url: '/dashboard',
            views: {
              'tab-dash': {
                     templateUrl: 'app/dashboard.html',
                      //controller: 'SignupCtrl',
              }
            }
        })
        .state('tabsEs.dashboardEs', {
          url: '/dashboard',
            views: {
              'tabEs-dash': {
               templateUrl: 'app/dashboardEs.html',
                //controller: 'SignupCtrl',
              }
            }
        })
        .state('tabs.adults', {
              url: '/adults',
              views: {
                'tab-dash': {
                  templateUrl: 'templates/tab-adults.html',
                  //controller: 'DashCtrl'
                }
              }
            })
          .state('tabs.adultsEs', {
              url: '/adultsEs',
              views: {
                'tab-dash': {
                 templateUrl: 'templates/tab-adultsEs.html',
                  controller: 'customersCtrl'
                }
              }
            })
           .state('passwordResetForm', {
                url: '/passwordResetForm',
                templateUrl: 'app/auth/login/passwordResetForm.html',
                controller: 'PasswordResetCtrl',
            });


        $urlRouterProvider.otherwise('login');
}]);
})();

When the state is tabsEs.dashboardEs it display correctly my navbar in spanish from templates/tabsEs.html. But I have been struggling some days to do the same when state change to tabs.adultsEs, but is not working, allways shown templates/tabs.html (english). Does anybody see the error, or give me a tip to do this?

Regards, Victor

Answer 1

Don´t duplicate your templates, use a plugin like angular-translate to add internationalization to your app. Explore the docs, it's really simple.