I have problem with Directives and Scopes and arrays. What I have read is that if I write a directive where the scope is set to true I get a new scope separated from parent scope. Here you see my two directives in my example. One for each of my arrays.
kdApp.directive('kdinsurancesituationamount', function kdinsurancesituationamount() {
return {
restrict: 'E',
scope: true,
template: "<span>Name </span> " +
"<input value='{{name1}}' ng-model='name1'>" +
"<div ng-repeat='isa in insuranceSituationAmountList1'>" +
"<span>Amount {{$index}} </span> " +
"<input value='{{isa}}' ng-model='isa'>" +
" <br /></div>"
};
});
kdApp.directive('kdinsurancesituationamount2', function kdinsurancesituationamount2() {
return {
restrict: 'E',
scope: true,
template: "<span>Name </span> " +
"<input type='text' maxlength='9' value='{{name2}}' ng-model='name2'>" +
"<div ng-repeat='isa in insuranceSituationAmountList2'>" +
"<span>Index {{$index}} </span> " +
"<input type='text' maxlength='9' value='{{isa.amount}}' ng-model='isa.amount'>" +
" <br /></div>"
};
});
It works fine when I have variabels like $scope.name1 = "John" but when I have arrays I don't understand how it works. See my controller here. I have two different examples, insuranceSituationAmountList1 and insuranceSituationAmountList2. And they work different. With ng-repeat I write out the array in input tags, every input tag has also a ng-model attribute.
kdApp.controller('InsuranceSituationAmountController', function ($scope) {
$scope.insuranceSituationAmountList1 = ["1000", "2000", "3000"];
$scope.insuranceSituationAmountList2 = [{
amount: "4000"
}, {
amount: "5000"
}, {
amount: "6000"
}];
$scope.name1 = "John";
$scope.name2 = "John";
});
The array insuranceSituationAmountList1 will never update the parent scope even if I put the scope to false in the directive. But for the field name1 it works as I want. When scope is false field name1 update parent scope and when scope is set to true it doesn't.
The array insuranceSituationAmountList2 will always update the parent scope even if I put the scope to true in the directive. But for the field name2 it works as I want. . When scope is false field name2 update parent scope and when scope is set to true it doesn't.
I have a jsfiddle where you can see how it works http://jsfiddle.net/uhlrog/Lzcqeruw/66/ So if you have time test it, first with scope: true and change to scope:false and change content in the input boxes.
I suppose that it is something fundamental that I don't understand but can someone explain for me why my arrays doesn't work well.
(As you can read my first languange is not english ;-))
Ok..
First you need to understand this basic principle:
When 'getting' a scope value angular will navigate up the hierarchy until it finds it. However when 'setting' property it will just place it on the current scope. (this is based on how javascript inheritance works and not a fault of angular, so don't blame them.)
So.. 'getting' {{ name }} for example will navigate up until it finds a $scope with name and display it. but 'setting' {{ name = 'Changed' }} will not set the value on that scope.. it will set it on the first available scope..
However.. 'getting' {{ object.name }} will navigate up the scopes until it finds an object called object then display it's name property and 'setting' {{ object.name = 'Changed' }} will first need to 'get' "object" (by navigating up the hierarchy of scopes) then set it's property. Which will be updated on whichever $scope "object" is on.
Now if you understand this it may help explain whats going on and this is why the ng-repeat is updating the right values in the 2nd version of the directive.
Now on the first directive I can see why it is confusing that the reverse is happening when you set scope to false.. this is because now ng-model="name1" is on the same scope as it's parent and updates directly (no $scope hierarchy) however also bear in mind that ng-repeat does create a scope!. so because the array values are not contained in objects the are updating only on the individual ng-repeat scopes.
use this css to see scopes:
.ng-scope {
border: 1px red solid;
}
I understand that I might not of explained this well (especially if English isn't your first language, as you mentioned) but hopefully an updated fiddle will help..
Highlighting the problem and Fixing the problem
It helps to remember that if you use ng-model without a '.' (dot) then that value will ONLY be updated on it's closest scope.
UPDATED: This article helps highlight this issue with diagrams if you didn't understand from my attempt
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments