angularjs - ui-router global state param -
i using ui-router router. want implement i18n , i've created 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 following links
a(ui-sref='main.index') home a(ui-sref='main.gallery') gallery however links like:
- for index //
- for gallery //gallery
i have found out in uisref directive cannot inherit params abstact main state.
am doing wrong states?
upadate:
i have 1 problem. binded params scope object. in ui-sref directive there watcher tracks params change, in handler of watcher there following checking
if (newval !== params) update(newval); however, when try debug params changing new param (i don't understand how, because params assigned once) , in if check newval === params
params = $scope.$eval(attr.params) //something i tried use object.observe on param object doesnot trigger before "watch" handler triggered.
now, changed if check make code work.
there's nothing wrong state definitions gather, you're not passing parameters ui-sref? state main.index & main.gallery still expect give it.
working plunkr: http://plnkr.co/edit/uaii8lkmkoahnacrlybq?p=preview (launch seperate window 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>', }) } ]);
Comments
Post a Comment