Currently, I am experiencing a problem that involves an ng-repeat containing an input with ng-change() inside a directive template. This input is double way bound to a parent object. When I enter text into the input box, everything functions as expected and the parent object updates accordingly. However, if I replace the parent object from the directive's controller, I encounter an issue.
The problem arises when the parent object is replaced and the view is updated with the new values. At this point, a function similar to ng-change() is manually triggered for some calculation purposes. Strangely, I have noticed that the same function gets called again (for reasons unknown). The ng-model of the input is undefined during these automatic calls, leading to the parent object eventually having an undefined value.
I am puzzled about why the ng-change event is triggered after the controller method calls. Could this be related to the child scopes created by ng-repeat?
To provide context, I have already used track by $index in my code and have bound models to parentObj.something.something[$index]. Any assistance on resolving this issue would be greatly appreciated...
In my code, I have defined a directive as follows:
module.directive('myDirective', function () {
return {
scope: {
target: '=',
},
controller: 'DemoController',
templateUrl: 'app/demo/html/demo.html'
}
});
Main template snippet:
<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's 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>
Within the directive's controller:
module.controller('DemoController', function($scope, $rootScope){
changeIt(-1,$scope.target,$scope.year,$scope.parent);
}
In the directive's controller, I attempt to make an API call to update the target data:
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}
}
This action triggers the directive to update the view with the new values fetched from the API response. The function is initially called once per directive with a first argument of -1. However, subsequent runs occur with 'undefined' as the first argument. With each run using 'undefined', the target.targets.years[1].values.data[$index] becomes undefined as well.
If anyone has insights or suggestions on what might be causing this unexpected behavior, I would greatly appreciate it. I've been trying to troubleshoot this issue for hours.