Angularjs:ng model is not accessible

Question

I am using ng-template in angularjs

<script type="text/ng-template" id="ng-wig/views/ng-wig.html">
<div class="ng-wig">
........
</div>
<script>

and i have a textarea using this ng-template.

<textarea ng-wig="content" ng-model="contents"></textarea>

but this ng-model cannot be accessed inside the controller. please help.

Answer 1

As you are loading your textarea template inside ng-include , if you look at ng-include directive you will see that it does create a new scope which is prototypically inherited from the parent scope.

If you use any scope variable which are declared in controller won't be accessible inside the include div. In order to get the controller variable accessible inside ng-include the you must declare it as object like $scope.model= {} then you should declare the properties in it. like ng-mode="model.contents"

Markup

<textarea ng-wig="model.content" ng-model="model.contents"></textarea>

Controller

$scope.model = {};

Here you can find similar answer

---

There are several approaches apart from above by which you could solve this issue.

The other way around would be, you could use controller as approach in that way you can avoid. In that you need to use this inside a controller & use controller alias while showing variable on html like vm.contents here

Makrup

<div ng-controller="myCtrl as vm">
   <div ng-include="'ng-wig/views/ng-wig.html'"></div>
</div>

Textarea

<textarea ng-wig="content" ng-model="vm.contents"></textarea>

---

Also you could point to the parent scope of ng-include which is nothing but controller scope just by doing $parent in your ng-model , this case your ng-model would be $parent.contents

Textarea

<textarea ng-wig="$parent.content" ng-model="$parent.contents"></textarea>

Note

Don't use this approach, use the 1st one which is more preferable.