javascript - How to make a variable change in one directive to get reflected in another directve -
how change value of bar directive2 reflected in directive1
if make scope:false happening.
is there other way, make happen.(because in code writting , cannot make scope:false).
basic requirement make 1 directive talk another.
here can try plunkr version of below code
html snippet
<body ng-controller="mainctrl"> directive1: <div directive1></div>.<br/> directive2: <div directive2></div>. </body> js snippet
var app = angular.module('myapp', []); app.directive('directive1', function() { return { restrict: 'a', replace: true, template: '<span>{{bar}}</span>' } }); app.directive('directive2', function() { return { restrict: 'a', scope:{ }, replace: true, link:function(s,e,a){ s.bar = "changed value"; }, template: '<b>{{bar}}</b>' } }); app.controller('mainctrl', function($scope) { $scope.name = 'world'; $scope.bar ="original value"; });
you use bar inside isolate scope, 2 way binding variable assigned bar attribute, means change inside directive on bar variable reflect changes on controller scope variable.
markup
<body ng-controller="mainctrl"> directive1: <div directive1></div>. <br /> directive2: <div directive2 bar="bar"></div>. </body> directive
app.directive('directive2', function() { return { restrict: 'a', scope:{ 'bar': '=' //<-- change here }, replace: true, link:function(s,e,a){ s.bar = "changed value"; }, template: '<b>{{bar}}</b>' } });
Comments
Post a Comment