AngularJS : how to reflect a variable change in one directive into another directive while using ng-repeat -
in first case: implemented directive directive2 change bar value reflected in directive1.
here u can find plunkr (1st case)
in second case:i implemented directive directive2, ng-repeat used along directive changes bar value , supposed reflected in directive1.
here u can find plunkr directive2 ng-repeat(2nd case)
how expect work: want bar in directive1 change according change in directive2
my question: 1st case working way want. in 2nd case bar value in directive1 not changing according changes made in directive2.
my assumption using ng-repeat creating multiple scopes , hence not working way want.
how solve this?
html snippet(2nd case)
<body ng-controller="mainctrl"> directive1: <directive1></directive1> <br /> <div ng-repeat="item in [1,2]"> directive2 ng-repeat {{item}} <directive2 bar="bar"></directive2> </div> </body> js snippet(2nd case)
var app = angular.module('myapp', []); app.directive('directive1', function() { return { restrict: 'e', replace: true, template: '<div><span>{{bar}}</span></div>' } }); app.directive('directive2', function() { return { restrict: 'e', scope:{ bar:"=" }, replace: true, link:function(s,e,a){ s.bar = "changed value"; }, template: '<div><b>{{bar}}</b></div>' } }); app.controller('mainctrl', function($scope) { $scope.name = 'world'; $scope.bar ="original value"; });
you have correctly guessed it! happening because of child scopes created ng-repeat.
when creating isolated scope bar dependency set operation on bar setting bar value on parent scope. in case of ng-repeat parent scope ng-repeat scope , hence behaviour.
use object instead of string pass string reference around , work. check plunkr http://plnkr.co/edit/jcqsixzrv9funfjwhoab?p=preview
set bar variable as
$scope.data={}; $scope.data.bar ="original value"; user directive
<directive2 bar="data.bar"></directive2>
Comments
Post a Comment