ng-model inside ng-transclude

Question

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"?

How about putting a `$watch` on text in the scope and fire an `$emit` event? — Raghavendra, Jul 11 '14 at 17:22

score 10 · Accepted Answer · edited Jul 11 '14 at 18:31

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

ng-model inside ng-transclude

1 Answers1

Linked