在UI-Router中以抽象状态填充公共视图

Question

这是否会导致页面显示包含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>

Answer 1

是的，这会有效。有a working plunker。

父视图的$scope （视图，在状态＆＃39;联系人＆＃39;视图中定义为＆＃39;内容＆＃39;）和它的范围，将成为原型继承的源泉。

这意味着，它的属性将在子状态＆＃39; contacts.list＆＃39;中可用，因为它被注入到该内容中。图

详细了解更多信息：

How do I share $scope data between states in angularjs ui-router?

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

    ...
    .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" });

}])

检查here