ui-router全局状态参数

时间:2014-03-18 12:31:34

标签: angularjs angular-ui-router

我正在为我的路由器使用ui-router。我想实现i18n,为此我创建了以下状态

$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'})

并创建了以下链接

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

但是这个链接看起来像:

  • 索引 //
  • 用于图库 //图库

我发现在uiSref指令中他不能从abstact main 状态继承params。

我在做错了吗?

Upadate:

我有一个问题。我将params绑定到scope对象。在ui-sref指令中有一个跟踪params变化的观察者,但是在观察者的处理程序中有以下检查

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

然而,当我尝试调试params正在改为新的param(我实际上不明白如何,因为params只分配了一次)和if check newVal === params

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

我甚至尝试在param对象上使用Object.observe,但在触发“watch”处理程序之前它不会触发。

现在,如果检查我的代码是否正常,我就改变了。

1 个答案:

答案 0 :(得分:2)

我收集的状态定义没有任何问题,但你没有将任何参数传递给你的ui-sref?你的国家main.index&amp; main.gallery仍然希望你能给它。

work plunkr:http://plnkr.co/edit/uaII8LkMKoAHnacrLybQ?p=preview(启动它的单独窗口以查看网址更改)

<强> 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>',

      })
  }
]);