从父布局控制器是不是子视图访问 [英] 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>

我想至少明白这是为什么happeneing什么正确的方法是确保所有的意见都获得了国家主控制器。谢谢！

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!

编辑：

要加入更多内容，如何用我的当前应用程序的意见IM我有详细的低于目前的设定。

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

从文件的谐音/布局/ event.html 父$状态的 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控制器=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.

推荐答案

整体棱角分明的UI路由器的设计，是对的视图/ $范围的继承 - 没有基本控制器无障碍环境。详细信息可以在这里找到：

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的意见。在这种情况下，你不能指望儿童的意见内访问的父状态视图的范围变量声明...

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:

通过Minko
• AngularJS继承模式Gechev


• AngularJS第3部分，继承通过加布里埃尔辛克

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

所以，让我们总结了一下。

So, let's summarize a bit.

1）我们知道，从任何模板，我们只能访问自己的 $范围。结果
2）什么在视图/模板$范围是可用的，是它的控制器可与某些功能进行扩展，对象等结果工作
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)

到这一点，我们可以创建一个活动对象父$范围，由 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>

另一种方法是放置控制器到$范围的活动对象：

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