在 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 （在状态 'contacts' 视图中定义为 'content' 的视图） 及其范围将是原型继承的来源。

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

还有更详细的介绍：

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

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

Filling common views in abstract state in UI-Router

javascript

angularjs

angular-ui

angular-ui-router

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