angularjs ng-repeat and ng-model does not go well with textarea/input tag

StackOverflow https://stackoverflow.com//questions/21025129

Question

When I generate input tags with ng-repeat and assign ng-model within custom directive it invokes directive on every key stroke.

This is Demo

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

var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) {
  $scope.arr = ["1234567"];
});

app.directive('myDirective', function($compile, $timeout) {
  var num=0;
  return {
    link: function(scope, el, attrs) {
      console.log('this happens with every keyup event in textarea when ng-model is given as arr[$index], why?');
    }
  };
});


<body ng-app="myApp" ng-controller="MyCtrl">
  arr[0] : {{arr[0]}} <br/>
  <input my-directive ng-repeat="str in arr" ng-model="arr[$index]" />
  </input>
</body>

It's strange.

Was it helpful?

Solution

It's because the ng-repeat is reevaluating each time you change the arr Array as it must be watching it (see line l256 here in ngRepeat sources on Github)

If you point the model on another array, everything is OK.

You can check it out with this Plunkr.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top