我为其中一个页面设置了一个版式,然后使用大量的小视图作为种子,这些小视图用于填充日期。我的状态目前看起来像这样:
.state('eventLayout', { templateUrl: 'partials/layouts/event.html', controller: 'EventCtrl', }) .state('event', { parent: 'eventLayout', url: '/event/{eventUrl}', views: { 'event.video': { templateUrl: 'partials/views/event.video.html' }, 'event.info': { templateUrl: 'partials/views/event.info.html' }, 'card.event': { templateUrl: 'partials/views/card.event.html' }, 'card.clip': { templateUrl: 'partials/views/card.clip.html' }, 'card.upcoming': { templateUrl: 'partials/views/card.upcoming.html' }, 'card.banner': { templateUrl: 'partials/views/card.banner.html' }, 'card.comment': { templateUrl: 'partials/views/card.comment.html' }, 'card.notification': { templateUrl: 'partials/views/card.notification.html' }, 'card.cube': { templateUrl: 'partials/views/card.cube.html' }, 'card.mix': { templateUrl: 'partials/views/card.mix.html' }, 'card.score': { templateUrl: 'partials/views/card.score.html' }, 'card.sponsor': { templateUrl: 'partials/views/card.sponsor.html' }, 'card.nobroadcasters': { templateUrl: 'partials/views/card.nobroadcasters.html' }, 'card.link': { templateUrl: 'partials/views/card.link.html' }, 'card.suggest': { templateUrl: 'partials/views/card.suggest.html', controller: 'SuggestblockCtrl' }, 'card.footer': { templateUrl: 'partials/views/card.footer.html' } } })
如您所见,父布局将我的Controller保留在称为 EventCtrl 的页面上。现在,我希望所有视图现在都可以访问此控制器,但事实并非如此。相反,我必须将来自 eventLayout 的主要父模板包装到div中,然后在其中使用旧学校:
<div ng-controller="EventCtrl"></div>
我至少想了解为什么会发生这种情况,以及确保所有视图都可以访问状态主控制器的正确方法是什么。谢谢!
编辑:
为了给我在当前应用程序中如何使用视图添加更多上下文,我在下面详细介绍了当前设置。
从父$ state eventLayout中的* partials / layouts / event.html 文件中 *
<div ng-controller="EventCtrl"> <div ui-view="event.video"></div> <div ng-repeat="activity in activities.results"> <div ng-if="activity.card_type == 'event'" ui-view="card.event"></div> <div ng-if="activity.card_type == 'clip'" ui-view="card.clip"></div> <div ng-if="activity.card_type == 'upcoming'" ui-view="card.upcoming"></div> </div> </div> </div>
如您所见,视图嵌套在父布局中。我必须使用ng-controller =“ EventCtrl”将其包装起来,以允许每个视图对其范围进行访问。
全部angular的ui路由器设计都是关于 view / $ scope 继承的,而不是基本控制器的可访问性。详细信息可以在这里找到:
States-%26-Nested-Views#scope-inheritance-by-view-hierarchy-only)
小引用:
请记住,如果状态的视图是嵌套的,则范围属性仅沿状态链继承。 范围的遗传 特性 无关 做到与 你的国家的嵌套 和 一切 做 与你的看法嵌套 (模板)。 完全有可能存在嵌套状态,这些状态的模板会在站点内各个非嵌套位置填充ui视图。在这种情况下,您不能期望在子状态的视图中访问父状态视图的范围变量…
请记住,如果状态的视图是嵌套的,则范围属性仅沿状态链继承。 范围的遗传 特性 无关 做到与 你的国家的嵌套 和 一切 做 与你的看法嵌套 (模板)。
完全有可能存在嵌套状态,这些状态的模板会在站点内各个非嵌套位置填充ui视图。在这种情况下,您不能期望在子状态的视图中访问父状态视图的范围变量…
另外,这些都是不错的阅读材料,在这里几乎无法更好地解释这些内容:
因此,让我们总结一下。
1)我们知道,从任何模板中,我们只能访问其自己的$scope。 2)在视图/模板$ scope中可用的是它的一项工作Controller,可以通过一些功能,对象等对其进行扩展 。3)如果有任何父控制器 (从嵌套视图的角度) 将任何东西注入到自己的/父范围-我们也可以访问它 (所谓的原型继承)
$scope
Controller
有了这个,我们可以Events在父$ scope中创建一个由EventCtrl- 管理的对象,并在任何子视图模板中使用它:
Events
EventCtrl
// the reference (reference to object Events) // to be shared accross all child $scopes $scope.Events = {}; // objects $scope.Events.MyModel = { FirstName: ".... // functions $scope.Events.save = function () {....
现在,在任何子模板中,我们都可以像这样使用它
<div>{{Events.MyModel.FirstName}}</div>
另一种技术是将控制器放入$ scope的Events对象中:
$scope.Events = this; // controller
然后可以完全访问控制器的方法,属性…