Discombobulous
Discombobulous

Reputation: 1184

angular directive data binding and interaction with ng-repeat

So I'm really confused with the following concept and hope someone can clear it up for me. Consider the following template code:

<test-dir val="val"></test-dir>

Assume test-dir has the following isolated scope:

scope:{ val : '='}

My understanding that this achieves a 2-way binding between the $scope.val variable inside the test-dir directive and the global variable $scope.val. So if I change the value of either one, the other one would be affected.

However, consider now I have the following template code:

<div ng-repeat="(index, val) in values">
  <test-dir index="index" val="val"></test-dir>
</div>

and the following isolated scope:

scope:{
  index:'=', 
  val : '='
}

Suddenly index and val are no longer 2-way bound. So each one of my test-dir directive has its own index and val, and changing the variables locally won't effect anyone else. Why?

Upvotes: 0

Views: 69

Answers (1)

user2943490
user2943490

Reputation: 6940

ng-repeat creates new child scopes, so each test-dir having its own index and val is working as intended.

Upvotes: 1

Related Questions