父视图中的控制器无法通过子视图访问

Question

我为其中一个页面设置了一个版式，然后使用大量的小视图作为种子，这些小视图用于填充日期。我的状态目前看起来像这样：

  .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”将其包装起来，以允许每个视图对其范围进行访问。

Answer 1

全部angular的ui路由器设计都是关于 view / $ scope 继承的，而不是基本控制器的可访问性。详细信息可以在这里找到：

[仅按视图层次结构的作用域继承](https://github.com/angular-ui/ui-router/wiki/Nested-

States-%26-Nested-Views#scope-inheritance-by-view-hierarchy-only)

小引用：

请记住，如果状态的视图是嵌套的，则范围属性仅沿状态链继承。 范围的遗传 特性 无关 做到与 你的国家的嵌套 和 一切 做
与你的看法嵌套 （模板）。

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

另外，这些都是不错的阅读材料，在这里几乎无法更好地解释这些内容：

• Minko Gechev编写的AngularJS继承模式
• AngularJS –第3部分， Gabriel Schenker的继承

因此，让我们总结一下。

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

有了这个，我们可以Events在父$ scope中创建一个由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

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