Ng-change function called several times from the input inside ng-repeat

Question

Well, I have a problem. I have ng-repeat, inside of which there is an input with ng-change (). This is part of the directive template and double binding to the parent. If I enter something into the input field, everything works fine, and the parent object is updated. However, when I need to replace the parent with a directive controller, I run into a problem.

The problem is that after replacing the parent object, the view is bound to the new (replaced) values. Also at that time, the same function (as in ng-change ()) is started manually for some calculation.

However, I noticed that the same function is called again (I don’t know how). It is important that the ng input model is undefined when they are automatically called. As a result, the parent object ultimately contains the value undefined.

I am still confused why ng-change is called after calling the controller method. Is there anything you need to do with the child areas that ng-repeat creates.

I already used the track at index $. and I attached models to parentObj.something.something [$ index]

Any help at the above level is appreciated ...

I have

module.directive('myDirective', function () { return { scope: { target: '=', }, controller: 'DemoController', templateUrl: 'app/demo/html/demo.html' } }); 

The main template:

 <li ng-repeat="l in group_Main.mains" <li ng-repeat="target in l.description.Value track by $index" <li ng-repeat="(key, groups) in target.group track by $index"> <div layout="row" layout-wrap myDirective target="group"></div> </li> </li> </li> 

app / demo / html / demo.html:: directive template

 <div class="table_FY_height" flex ng-repeat="m in months track by $index"> <input ng-change="changeIt(target.targets.years[1].values.data[$index], target, year,parent, $index)"" ng-if="$index>currentMonth" ng-model="target.targets.years[1].values.data[$index]"/> </div> 

In the controller directive:

 module.controller('DemoController', function($scope, $rootScope){ changeIt(-1,$scope.target,$scope.year,$scope.parent); } 

From the directory controller, I am trying to call the API and update the target data as:

  http.get(url).then({ function(APIResponse){ for(var i=0; i<12; i++){ target.targets.years[1].values.data[i] = APIResponse.targets.years[1].values.data[i] }}, function(error){ //error handling here} } 

Doing this invokes customization and updates the screen view with the new values ​​from APIResponse. Since directive management is controlled by ng-show, the new values ​​remain unchanged in the view. This function is called once in the controller for each directory call with the first argument as -1. But after that, it starts again with the first value as "undefined". With undefined, it is executed as many times as the directive is compiled. Therefore, target.targets.years [1] .values.data [$ index] becomes undefined.

Any ideas what is going wrong? I scratch my head over him for several hours.

Answer 1

I delved deeply into the problem and found that in my case I had a directive placed in the input tag, which parsed the model after it was bound. (This was mainly used for some kind of rounding, so I removed this logic and started sending rounded numbers from the server. The problem stopped appearing). Therefore, I came to the conclusion that the second ng-change started because the model is changed again by directive. Anyone who encounters such problems should look for any other changes to the model after the initial binding.

Posting this as an answer, as that was the solution in my case.