Question

我正在构建这个路线系统

var app = angular.module('plunker', ['ui.router']);

app.config(function ($stateProvider, $urlRouterProvider) {
  $urlRouterProvider
    .when('/admin', '/admin/dashboard')
    .when('/user', '/user/dashboard')
    .otherwise('/admin/dashboard');

  $stateProvider
    .state('admin', {
      url: '/admin/dashboard',
      resolve: {
        test: function() {
          console.log('called admin');
          return;
        }
      },      
      views: {
        'navigation': {
          template: '<div>admin navigation. Go <a ui-sref="admin.link1">link1</a></div>'
        },
        'content': {
          template: '<div>admin dashboard</div>'
        }
      }
    })
    .state('admin.link1', { //for some reason admin.link1 does not work but just link1 is OK
      url: '/admin/link1',
      resolve: {
        test: function() {
          console.log('admin.link1 called resolve');
          return;
        }
      },
      views: {
        'navigation': {
          template: '<div>admin navigation</div>'
        },
        'content': {
          template: '<div>admin link1</div>'
        }
      }
    })
    .state('user', {
      url: '/user/dashboard',
      views: {
        'navigation': {
          template: '<div>user navigation</div>'
        },
        'content': {
          template: '<div>user dashboard</div>'
        }
      }
    });
});

HTML中将包含navigation和content ui-view

  <body ng-app="plunker">
    <div>
      <a ui-sref="admin">Admin</a>
      <a ui-sref="user">User</a>
    </div>
    <div ui-view="navigation"></div>
    <div ui-view="content"></div>  
  </body>

我想点击link1然后转到admin.link1状态但不知何故无效。

但如果我删除admin父级并仅使用link1，则可以正常使用。

代码：http://plnkr.co/edit/F7lw58esXz7rWzeo3ER6?p=preview

预览：http://embed.plnkr.co/F7lw58esXz7rWzeo3ER6/preview

有任何线索吗？

Answer 1

你几乎就在那里，更新了plunker。嵌套视图只有一个更改附加符号'@'：

.state('admin.link1', {
  url: '/admin/link1',
  resolve: {
    test: function() {
      console.log('admin.link1 called resolve');
      return;
    }
  },
  views: {
    // instead of this
    // 'navigation': {
    // we have to use absolute name with the @ at the end
    'navigation@': {
      template: '<div>admin navigation</div>'
    },
    // this is searched in parent view
    // 'content': {
    // this is targting the root
    'content@': {
      template: '<div>admin link1</div>'
    }
  }
})

这一点隐藏在absolut view naming中，一个摘录：

在幕后，为每个视图分配一个遵循 viewname@statename 方案的绝对名称，其中viewname是视图指令中使用的名称，州名是州的绝对名称，例如contact.item。您还可以选择以绝对语法编写视图名称。

工作示例here或其他here

请尝试阅读此answer，我尝试深入描述视图命名的内容。（搜索最后一部分：EXTEND：给出评论的答案）

子路线不会触发

1 个答案: