javascript - Inherit outer controller's scope from within ng-include without a service? - Stack Overflow

admin管理员组

文章数量:1350800

In AngularJS is it possible to inherit the parent controller's scope from within an included partial instead of passing the data through an injected service?

Example case:

Let's say ParentCtrl's scope looks like: { testData: 'testing stuff' }

<div ng-controller="ParentCtrl">
    Here we're defined: {{testData}}
    <div ng-include="'partial.html'"></div>
</div>

And inside partial.html:

<em>Inherited: {{testData}}</em>

So the partial doesn't even need it's own controller for this. If this is impossible though and you can only pass injected data between controllers via a service why has Angular done things this way?

In AngularJS is it possible to inherit the parent controller's scope from within an included partial instead of passing the data through an injected service?

Example case:

Let's say ParentCtrl's scope looks like: { testData: 'testing stuff' }

<div ng-controller="ParentCtrl">
    Here we're defined: {{testData}}
    <div ng-include="'partial.html'"></div>
</div>

And inside partial.html:

<em>Inherited: {{testData}}</em>

So the partial doesn't even need it's own controller for this. If this is impossible though and you can only pass injected data between controllers via a service why has Angular done things this way?

• javascript
• angularjs
• angularjs-scope

Share Improve this question Follow edited Feb 3, 2015 at 18:49 saricden asked Feb 3, 2015 at 17:25 saricdensaricden 2,34255 gold badges3232 silver badges4444 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Yes, that's actually how it works by default. ng-include always creates a new scope and:

A "child scope" (prototypically) inherits properties from its parent scope.

See the docs on Scope.

Here is an example plunker.

Edit: Also, I just noticed a syntax issue in your original question. The template should be surrounded in single quotes. Change <div ng-include="partial.html"></div> to <div ng-include="'partial.html'"></div>

Playing around with the example Plunkr in the ngInclude documentation, I'm able to access the parent controller's scope from within the partial. For example, change the contents of template1.html to:

Content of template1.html {{ template }}

Per the docs, ngInclude creates a new scope, which means you'll need to observe the angular best practice of "having a dot in your scope" (accessing objects on the scope instead of primitive values), to avoid problems with broken references. You can check out this Stack Overflow question for more information.

本文标签： javascriptInherit outer controller39s scope from within nginclude without a serviceStack Overflow