Child route does not trigger

2019-09-04 15:49发布

站内问答 / JavaScript
1786 1 6

I am building this route system

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

The HTML will have navigation and content ui-view in it

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

I want to click on link1 and go to admin.link1 state but somehow that is not working.

But if I remove the admin parent and use link1 only, it works fine.

Code: http://plnkr.co/edit/F7lw58esXz7rWzeo3ER6?p=preview

Preview: http://embed.plnkr.co/F7lw58esXz7rWzeo3ER6/preview

Any clue?

1条回答
看我几分像从前
2楼-- · 2019-09-04 16:38

You were almost there, the updated plunker. There is only one change the nested views do have appended sign '@':

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

The point is hidden in the absolut view naming, an extract:

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

The working example(s) here or other here

Please, try to read this answer, where I tried deeply describe what is the view naming about.(search for a last section: EXTEND: to give THE answer to a comment)

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)