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

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

1 Answer 1

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