javascript - ng-model inside ng-transclude - Stack Overflow

admin管理员组

文章数量:1327660

I have an issue when using ng-model inside ng-transclude.

As ng-transclude creates child scopes the value can't be set to the outer scope anymore.

Without ng-transclude everything works fine:

{{text}}
<div>
  <textarea ng-model="text"></textarea>
</div>

With ng-transclude the text won't update as the textarea modifies only the child scope:

{{text}}
<pane>
   <textarea ng-model="text"></textarea>
</pane>

Is there any other way then using ng-model="$parent.text"?

I have an issue when using ng-model inside ng-transclude.

As ng-transclude creates child scopes the value can't be set to the outer scope anymore.

Without ng-transclude everything works fine:

{{text}}
<div>
  <textarea ng-model="text"></textarea>
</div>

With ng-transclude the text won't update as the textarea modifies only the child scope:

{{text}}
<pane>
   <textarea ng-model="text"></textarea>
</pane>

http://plnkr.co/edit/GKf7WhnnItVNeBpvSB0F?p=preview

Is there any other way then using ng-model="$parent.text"?

• javascript
• angularjs
• data-binding

Share Improve this question Follow asked Jul 11, 2014 at 15:56 jantimonjantimon 38.2k2323 gold badges126126 silver badges193193 bronze badges 1

• How about putting a $watch on text in the scope and fire an $emit event? – Raghavendra Commented Jul 11, 2014 at 17:22

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

as the $parent may refer to a different scope, depending on the context, it is advisable that you declare an object to hold properties you intend to write into (e.g. $scope.data = {text: "foo"}; ) , so that when the ng-model is trying to write the value (via ng-model="data.text"), it will have to make a "read" first, looking along the prototype chain, until it finally reaches the "data" property on the desired scope (assuming there is no other scope that has that property along the way).

This approach follows the "always use the dot in ng-model" rule.

(side note: another possible approach is to use an alias for the controller, assuming it is available in the angular version you are using).

<div ng-controller="ExampleController">
    {{my.text}}
    <pane>
      <textarea ng-model="my.text"></textarea>
    </pane>
  </div>

http://plnkr.co/edit/aESrHtuSH9cd9ljyQAfH?p=preview

本文标签： javascriptngmodel inside ngtranscludeStack Overflow