Javascript 子路由不触发_Javascript_Angularjs_Angular Ui Router

Javascript 子路由不触发

javascript angularjs

Javascript 子路由不触发,javascript,angularjs,angular-ui-router,Javascript,Angularjs,Angular Ui Router,我正在建立这个路线系统 var app = angular.module('plunker', ['ui.router']); app.config(function ($stateProvider, $urlRouterProvider) { $urlRouterProvider .when('/admin', '/admin/dashboard') .when('/user', '/user/dashboard') .otherwise('/admin/dash

我正在建立这个路线系统

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

我想点击link1并进入admin.link1状态，但不知何故，这不起作用

但是，如果我删除管理父项并仅使用link1，它就可以正常工作

代码：

预览：

有什么线索吗？

你就快到了，最新消息。只有一个更改嵌套视图中添加了符号“@”：

该点隐藏在中，提取：

在幕后，每个视图都会被分配一个绝对名称，该名称遵循一种模式viewname@statename，其中viewname是view指令中使用的名称，state name是州的绝对名称，例如contact.item。您还可以选择以绝对语法编写视图名称

工作示例或其他

请尝试阅读本文，在这里我试图深入描述视图命名是关于什么的。搜索最后一个部分：EXTEND:为注释提供答案

  <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>

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