ng-model inside ng-transclude

angularjs, data-binding, javascript

Solution

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

Problem

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

Original source