CODEWITHSUNDEEP
angularjsangular-ui-router
arm.localhost
arm.localhost

Reputation: 479

ui-router global state param

I am using ui-router for my router. I want to implement i18n and for it I've created the following states

$stateProvider
           .state('main', { url: '/:lng', abstract: true, template: '<div ui-view></div>'})
           .state('main.index', { url: '/', templateUrl: '/views/index.html'})
           .state('main.gallery', { url: '/gallery', templateUrl: '/views/gallery.html', controller: 'GalleryCtrl'})

And created the following links

a(ui-sref='main.index') Home   
a(ui-sref='main.gallery') Gallery

However this links look like:

I have found out that in uiSref directive he cannot inherit params from abstact main state.

Am I doing wrong with states?

Upadate:

I have one problem. I binded params to the scope object. In the ui-sref directive there is a watcher that tracks the params change, but in the handler of the watcher there is the following checking 

if (newVal !== params) update(newVal);

However, when I try to debug the params is changing to the new param (I actually don't understand how, because params is assigned only once) and in the if check newVal === params

params = $scope.$eval(attr.params) //something like this

I even tried to use Object.observe on param object but it doesnot trigger before "watch" handler is triggered.

Now, I changed if check to make my code work.

Upvotes: 0

Views: 2682

Answers (1)

Busata
Busata

Reputation: 1118

There's nothing wrong with your state definitions from what I gather, but you're not passing any parameters to your ui-sref? Your state main.index & main.gallery still expect you to give it.

Working plunkr: http://plnkr.co/edit/uaII8LkMKoAHnacrLybQ?p=preview (Launch it seperate window to see url changes)

HTML:

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
    <script data-require="ui-router@*" data-semver="0.2.8" src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
  </body>

<a ui-sref='main.index({lng:5})'>Home</a>    <br/>
<a ui-sref='main.gallery({lng:5})'>Gallery</a>

</html>

JS:

// Code goes here

angular.module("app", ["ui.router"]).config(["$stateProvider",
  function($stateProvider) {
    $stateProvider
      .state('main', {
        url: '/:lng',
        abstract: true,
        template: '<div ui-view></div>'
      })
      .state('main.index', {
        url: '/',
        template: '<span>Index</span>'
      })
      .state('main.gallery', {
        url: '/gallery',
        template: '<span>Gallery</span>',

      })
  }
]);

Upvotes: 2

Related Questions