angular directive data binding and interaction with ng-repeat

Question

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?

user2943490 · Accepted Answer · 2014-11-17 03:54:59Z

1

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

answered Nov 17, 2014 at 3:54

user2943490

6,9402 gold badges24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular directive data binding and interaction with ng-repeat

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related