在UI路由器中以抽象状态填充常见视图

Filling common views in abstract state in UI-Router

本文关键字：状态 填充 常见 视图 抽象 UI 路由器      更新时间：2023-09-26

这会导致页面的页眉、页脚和内容块填充content.list视图吗？

$stateProvider
    .state('contacts', {
        abstract: true,
        url: '/contacts',
        views: {
          header: { templateUrl: 'admin/header.html'},
          content: {
            templateUrl: 'contacts.html',
            controller: function($scope){
                $scope.contacts = [{ id:0, name: "Alice" }, { id:1, name: "Bob" }];
            }
          },
          footer: { templateUrl: 'admin/footer.html'}
        }           
    })
    .state('contacts.list', {
        url: '/list',
        templateUrl: 'contacts.list.html'
    })


 <!-- index.html -->
 ...
 <div ui-view="header"></div>
 <div ui-view="content"></div>
 <div ui-view="footer"></div>   
 ...


<!-- contacts.html -->
<h1>Contacts Page</h1>
<div ui-view></div>


<!-- contacts.list.html -->
<ul>
    <li ng-repeat="person in contacts">
        <a ng-href="#/contacts/{{person.id}}">{{person.name}}</a>
    </li>
</ul>

是的，这会起作用。有一个正在工作的plunker。

父视图的$scope（在状态"contacts"视图中定义为"content"的视图）及其范围将是原型继承的来源。

这意味着，它的属性将在子状态"contacts.list"中可用，因为它被注入到"内容"视图中

还有更多关于它的详细信息：

如何在angularjs-ui路由器中的状态之间共享$scope数据

为了证明这一点，我们可以用列表控制器扩展上面的代码片段，并注入更多的联系人

    ...
    .state('contacts.list', {
      url: '/list',
      templateUrl: 'contacts.list.html',
      controller: 'listCtrl', // new controller
    })
  }
])
// we get already initiated contacts... coming from parent view
.controller('listCtrl', ['$scope', function($scope) {
    $scope.contacts
      .push({ id: 2, name: "from a child" });
}])

在此处检查

相关文章：