Angular ui路由器中的绝对名称

Absolute Names in Angular ui-router

本文关键字:ui 路由器 Angular      更新时间:2023-09-26

我想澄清文档->中提到的这个案例

$stateProvider
  .state('contacts.detail', {
    views: {
        // absolutely targets the 'status' view in root unnamed state.
        // <div ui-view='status'/> within index.html
        "status@" : {
                    templateUrl: layout.html,
                    controller : 'MainController as vm'
         }

  });

因此,在这种情况下,如果我错误地定义了另一个具有类似视图对象的状态,例如

$stateProvider
  .state('contacts.detail1', {
    views: {
        // absolutely targets the 'status' view in root unnamed state.
        // <div ui-view='status'/> within index.html
        "status@" : {
                    templateUrl: layout1.html,
                    controller : 'MainController1 as vm'
         }

  });

那么,在选择要分配给ui view="status"元素的模板、控制器时会发生冲突吗?

不,不会有任何冲突。定义你的ui路由器代码如下

$stateProvider
  .state('contacts.detail', {
    url: '.detail',
    views: {
      "status@" : {
        templateUrl: layout.html,
        controller : 'MainController as vm'
       }
    }).state('contacts.detail1', {
    url: '.detail1',
    views: {
        "status@" : {
            templateUrl: layout1.html,
            controller : 'MainController1 as vm'
         }
  });

但也应该有一个联系人状态
第一个的Url将为/contacts.detail,第二个的Url为/contacts.detail1