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

我想要的是，任何“子状态”都可以覆盖顶级状态的 “布局” 部分，以便可以根据站点区域使用不同的站点布局。

给定以下 system/server/views/index.html:

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

和两个布局互换到上面: 系统/公共(public)/ View /布局/standard.html:

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

system/public/views/layouts/full-width.html:

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

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

<div>some sample content</div>

最后是路由器:

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

以上作品。我可以在子状态下交换标题，但如果我为“布局”添加覆盖:

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

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

知道这里发生了什么吗？

如果这不是可行的方法，还有哪些替代方法？

最佳答案

重点是在子状态 'root.home' 中重写模板，如下所示:

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

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

    '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="" inside this, current ' root.home' 状态。

父状态“home”中不存在目标，因为我们完全跳过了它。

在这种情况下，文档中的样本实际上是 self 描述的:

View Names - Relative vs. Absolute Names

(引用 self 描述片段)

$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

Keep in mind that scope properties only inherit down the state chain if the views of your states are nested. Inheritance of scope properties has nothing to do with the nesting of your states and everything to do with the nesting of your views (templates).

It is entirely possible that you have nested states whose templates populate ui-views at various non-nested locations within your site. In this scenario you cannot expect to access the scope variables of parent state views within the views of children states.

即- 我们不能从父“根”状态继承任何东西，因为继承只适用于 View ...

关于javascript - 在 ui-router 中从较低状态覆盖较高状态的布局 View 会导致 ui-view 为空，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26902417/