Question

我尝试使用ui-router以角度嵌套状态创建基本布局系统。

我喜欢的是任何子状态＆＃39;可以覆盖顶级状态的'layout'部分，以便根据站点的区域使用不同的站点布局。

给出以下system / server / views / index.html：

＆＃13;

<section data-ui-view="layout" ></section>

＆＃13;

和两个布局互换成上面的：系统/公/视图/布局/ standard.html：

＆＃13;

  <div class="navbar navbar-inverse navbar-fixed-top" data-ui-view="header" data-role="navigation"></div>
  <section class="container-fluid">
      <section data-ui-view ></section>
  </section>

＆＃13;

系统/公共/视图/布局/全width.html：

＆＃13;

  <div class="navbar navbar-inverse navbar-fixed-top" data-ui-view="header" data-role="navigation"></div>
  <section class="container">
      <section data-ui-view ></section>
  </section>

＆＃13;

示例内容系统/ public / views / index.html

＆＃13;

<div>some sample content</div>

＆＃13;

最后是路由器：

＆＃13;

function($stateProvider, $urlRouterProvider) {
  // For unmatched routes:
  $urlRouterProvider.otherwise('/');

  // states for my app
  $stateProvider
    .state('root', {
      url: '/',
      abstract: true,
      views: {
        'layout@': {
          templateUrl: 'system/views/layouts/standard.html'
        },
        'header@root': {
          templateUrl: 'system/views/partials/header.html'
        }
      }
    })
    .state('root.home', {
      url: '',
      views: {
        'header@root': {
          templateUrl: 'system/views/partials/header2.html'
        },
        '': {
          templateUrl: 'system/views/index.html'
        }
      }
    });
}

＆＃13;

以上作品。我能够在子状态中交换标头，但是如果我为“布局”添加了覆盖：

＆＃13;

function($stateProvider, $urlRouterProvider) {
  // For unmatched routes:
  $urlRouterProvider.otherwise('/');

  // states for my app
  $stateProvider
    .state('root', {
      url: '/',
      abstract: true,
      views: {
        'layout@': {
          templateUrl: 'system/views/layouts/standard.html'
        },
        'header@root': {
          templateUrl: 'system/views/partials/header.html'
        }
      }
    })
    .state('root.home', {
      url: '',
      views: {
        'header@root': {
          templateUrl: 'system/views/partials/header2.html'
        },
        '': {
          templateUrl: 'system/views/index.html'
        },
--->>> 'layout@': {
          templateUrl: 'system/views/layouts/full-width.html'
        }
      }
    });
}

＆＃13;

当我添加'layout@'时，date-ui-view="layout"确实正确加载，但标题和未命名的子ui视图不会被替换。

这里有什么想法？

如果这不是可行的，那么什么是替代方法？

Answer 1

重点是覆盖子状态'root.home'中的模板，如下所示：

.state('root.home', {
    ...
->> 'layout@': {
      templateUrl: 'system/views/layouts/full-width.html'
    }

实际上完全从父“root”中删除了任何部分。所以现在我们必须将它用于兄弟视图：

    'header@root.home': {  // see the 'root.home' after @
      templateUrl: 'system/views/partials/header2.html'
    },
    '@root.home': {        // see the 'root.home' after @
      templateUrl: 'system/views/index.html'
    },

请注意，我们在 root.home 之后使用了@。那就是：我们明确地说：

在此，当前ui-view="header"州内找到ui-view=""和未命名的'root.home'。

父状态'home'中没有目标，因为我们完全跳过它。

在这种情况下，文档中的示例实际上是自我描述性的：

View Names - Relative vs. Absolute Names

（引用自我描述代码段）

$stateProvider
  .state('contacts', {
    // This will get automatically plugged into the unnamed ui-view 
    // of the parent state template. Since this is a top level state, 
    // its parent state template is index.html.
    templateUrl: 'contacts.html'   
  })
  .state('contacts.detail', {
    views: {
        ////////////////////////////////////
        // Relative Targeting             //
        // Targets parent state ui-view's //
        ////////////////////////////////////

        // Relatively targets the 'detail' view in this state's parent state, 'contacts'.
        // <div ui-view='detail'/> within contacts.html
        "detail" : { },            

        // Relatively targets the unnamed view in this state's parent state, 'contacts'.
        // <div ui-view/> within contacts.html
        "" : { }, 

        ///////////////////////////////////////////////////////
        // Absolute Targeting using '@'                      //
        // Targets any view within this state or an ancestor //
        ///////////////////////////////////////////////////////

        // Absolutely targets the 'info' view in this state, 'contacts.detail'.
        // <div ui-view='info'/> within contacts.detail.html
        "info@contacts.detail" : { }

        // Absolutely targets the 'detail' view in the 'contacts' state.
        // <div ui-view='detail'/> within contacts.html
        "detail@contacts" : { }

        // Absolutely targets the unnamed view in parent 'contacts' state.
        // <div ui-view/> within contacts.html
        "@contacts" : { }

        // absolutely targets the 'status' view in root unnamed state.
        // <div ui-view='status'/> within index.html
        "status@" : { }

        // absolutely targets the unnamed view in root unnamed state.
        // <div ui-view/> within index.html
        "@" : { } 
  });

另外，请注意这个重要的事实：

Scope Inheritance by View Hierarchy Only

请记住，只有嵌套状态的视图时，范围属性才会继承状态链。范围属性的继承与状态的嵌套无关，也与视图嵌套（模板）无关。

完全有可能您有嵌套状态，其模板在您网站中的各种非嵌套位置填充ui-views。在这种情况下，您不能期望在子状态视图中访问父状态视图的范围变量。

即。 - 我们不能从父'root'状态继承任何东西，因为继承只进行视图查看...

从ui-router中的较低状态覆盖较高状态的布局视图会导致空ui-view

1 个答案:

View Names - Relative vs. Absolute Names

Scope Inheritance by View Hierarchy Only