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

正如您所看到的，父布局为我的控制器保留了名为 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 =＆＃34; EventCtrl＆＃34;来包装它。为了允许每个视图访问其范围。

Answer 1

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

Scope Inheritance by View Hierarchy Only

小引用：

请记住，只有嵌套状态的视图时，范围属性才会继承状态链。 范围继承属性没有与嵌套状态和所有做嵌套您的观点（模板）。

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

这些都是很好的阅读，这里的内容几乎没有更好的解释：

AngularJS Inheritance Patterns作者：Minko Gechev
AngularJS–Part 3, Inheritance

所以，让我们总结一下。

1）我们知道，从任何模板我们只能访问自己的$scope 2）视图/模板$ scope中可用的是Controller的一个作业，可以使用某些函数，对象等扩展它。
3）如果任何父控制器（从视图嵌套角度来看）将任何东西注入其自己的/父范围 - 我们也可以访问它（所谓的原型继承）

有了这个，我们可以在父{scope}中创建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

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

子视图无法访问父布局中的控制器

1 个答案:

Scope Inheritance by View Hierarchy Only