子视图无法访问父布局中的控制器 [英] Controller from Parent Layout is not access by child views

问题描述

我为我的其中一个页面设置了一个布局，然后在其中植入了大量我用来填充日期的小视图.我的状态目前看起来像这样:

 .state('eventLayout', {templateUrl: 'partials/layouts/event.html',控制器:'事件控制'，}).state('事件', {父:'事件布局'，url: '/event/{eventUrl}',意见:{'事件.视频':{templateUrl: 'partials/views/event.video.html'},'事件信息':{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',控制器:'SuggestblockCtrl'},'card.footer':{templateUrl: 'partials/views/card.footer.html'}}})

如您所见，父布局为名为 EventCtrl 的页面保存了我的控制器.现在我希望所有的视图现在都可以访问这个控制器，但情况似乎并非如此.相反，我必须将 eventLayout 中的主要父模板包装在一个 div 中，然后我只使用旧学校:

我想至少了解为什么会发生这种情况以及确保所有视图都可以访问状态主控制器的正确方法是什么.谢谢！

为了添加更多关于我如何在我当前的应用程序中使用视图的上下文，我在下面详细介绍了当前的设置.

来自父 $state eventLayout

中的文件 partials/layouts/event.html

<div ui-view="event.video"></div><div ng-repeat="activity.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>

如您所见，视图嵌套在父布局中.我必须用 ng-controller="EventCtrl" 将它全部包装起来，以便允许每个视图访问其范围.

解决方案

整个 angular 的 ui-router 设计，是关于 view/$scope 继承 - 而不是基本控制器可访问性.详细信息可以在这里找到:

仅按视图层次结构继承范围

小引用:

<块引用>

请记住，如果您的状态的视图是嵌套的，那么范围属性只会沿状态链向下继承.范围的继承属性与状态的嵌套和一切无关视图的嵌套(模板).

您完全有可能拥有嵌套状态，其模板会在您站点内的各种非嵌套位置填充 ui-view.在这种情况下，您不能期望在子状态的视图中访问父状态视图的范围变量...

这些也是很好的读物，这里几乎没有更好地解释哪些内容:

• AngularJS 继承模式 作者 Minko格切夫
• AngularJS – 第 3 部分，继承 作者:Gabriel Schenker

那么，让我们总结一下.

1) 我们知道，从任何模板我们只能访问它自己的 $scope.
2) 在视图/模板 $scope 中可用的是它的 Controller 的工作，它可以用一些函数、对象等来扩展它.
3) 如果任何父控制器(从视图嵌套的角度来看) 将任何东西注入到它自己的/父作用域中——我们也可以访问它(所谓的原型继承)

有了这个，我们可以在父 $scope 中创建一个 Events 对象，由 EventCtrl 管理 - 并在任何子视图模板中使用它:

//引用(引用对象事件)//在所有子 $scopes 中共享$scope.Events = {};//对象$scope.Events.MyModel = { 名字:....//职能$scope.Events.save = function () {....

现在在任何子模板中我们都可以像这样使用它

{{Events.MyModel.FirstName}}

另一种技术是将控制器放入 $scope 的 Events 对象中:

$scope.Events = this;//控制器

然后可以完全访问控制器的方法、属性...

I have a layout set up for one of my pages that is then seeded with a ton of little views that I use to populate with date. My states currently looks like so:

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

As you can see the parent layout holds my Controller for the page which is called EventCtrl . Now I would expect that all the views now have access to this controller, but that doesn't seem to be the case. Instead I have to wrap the main parent template from eventLayout in a div where I then just use the old school:

 <div ng-controller="EventCtrl"></div>

I'd like to at least understand why this is happeneing and what the proper method is to make sure all views have access to the states main controller. Thanks!

EDIT:

To add more context to how im using the views in my current app I have detailed the current set-up below.

From the file partials/layouts/event.html in parent $state eventLayout

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

As you can see a views are nested within the parent layout. I'm having to wrap it all with ng-controller="EventCtrl" in order to allow each view access to its scope.

解决方案

The overall angular's ui-router design, is about the view / $scope inheritance - not base controller accesibility. The detailed info could be found here:

Scope Inheritance by View Hierarchy Only

small cite:

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

Also these are good reading, which content would be hardly any better explained here:

• AngularJS Inheritance Patterns by Minko Gechev
• AngularJS–Part 3, Inheritance by Gabriel Schenker

So, let's summarize a bit.

1) We know, that from any template we can access only its own $scope.
2) What is available in the view/template $scope, is a job of its Controller which can extend it with some functions, objects, etc.
3) If any parent controller (from view-nesting perspective) will inject anything into its own/parent scope - we will have access to it as well (so called prototypical inheritance)

Having this, we can create an Events object in the parent $scope, managed by EventCtrl - and consume it in any a child view template:

// 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 () {....

And now in any child template we can use it like this

<div>{{Events.MyModel.FirstName}}</div>

Another technique would be to place the controller into $scope's Events object:

$scope.Events = this; // controller

And then have full access to controller's methods, properties...

这篇关于子视图无法访问父布局中的控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！