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

问题描述

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

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

如您所见，父布局包含名为 EventCtrl 的页面的控制器.现在我希望所有视图现在都可以访问这个控制器，但事实并非如此.相反，我必须将 eventLayout 中的主要父模板包装在一个 div 中，然后我只使用老派:

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!

为了给我在当前应用中使用视图的方式添加更多背景信息，我在下面详细介绍了当前设置.

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

来自父 $state eventLayout

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>

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

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.

推荐答案

整体 Angular 的 ui-router 设计，是关于 view/$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:

小引用:

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

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

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

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 继承模式 by Minko格切夫
• AngularJS - 第 3 部分，继承 作者:Gabriel Schenker

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

所以，让我们总结一下.

So, let's summarize a bit.

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

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)

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

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>

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

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