javascript - How to make a variable change in one directive to get reflected in another directve

How do i change the value of bar from directive2 so that it is reflected in directive1

If i make the scope:false it is happening.
Is there any other way, to make this happen.(because in the code i am writting , i cannot make scope:false).
My basic requirement is to make one directive to talk to another.
Here you can try the plunkr version of the below code

HTML snippet

<body ng-controller="MainCtrl">
  this is directive1: <div directive1></div>.<br/>
  this is 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";
});

How do i change the value of bar from directive2 so that it is reflected in directive1

HTML snippet

<body ng-controller="MainCtrl">
  this is directive1: <div directive1></div>.<br/>
  this is 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";
});

Share Improve this question edited Jul 19, 2015 at 11:05 Pankaj Parkar 136k23 gold badges240 silver badges303 bronze badges asked Apr 25, 2015 at 17:47 dreamer 9012 gold badges17 silver badges38 bronze badges

The second directive should use require to get a reference to the first directive's controller. docs.angularjs/api/ng/service/$pile#-require- – JB Nizet Commented Apr 25, 2015 at 17:56
@JBNizet but those two directive should be nested – Pankaj Parkar Commented Apr 25, 2015 at 17:57
1 That's precisely what require is for. – JB Nizet Commented Apr 25, 2015 at 17:58
@dreamer could you please update your plunkr with code? – Pankaj Parkar Commented Apr 25, 2015 at 17:59
I have already read, that the directives should be nested, if require is to be used. So i know that. But in this scenario, which is a pletly valid situation, how do i get what i want – dreamer Commented Apr 25, 2015 at 18:00

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

You could simply use bar inside your isolate scope, that will do two way binding with your variable which is assigned to bar attribute, That means change inside a directive on bar variable will reflect the changes on controller scope variable.

Markup

<body ng-controller="MainCtrl">
  this is directive1: <div directive1></div>.
  <br />
  this is 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>'
  }

});

Working Plunkr

I have modified your code in here

Share the variable in both directives by passing it as '=' in the scope, changing it in one directive will change it in the the other.

<body ng-controller="MainCtrl">
  this is directive1: <div directive1 bar="bar"></div>.
  <br />
  this is directive2: <div directive2 bar="bar"></div>.
</body>

var app = angular.module('myApp', []);
app.directive('directive1', function() {
return {
    restrict: 'A',
    scope:{bar:'='},
    replace: true,
    template: '<span>{{bar}}</span>'
}

});

app.directive('directive2', function() {
  return {
    restrict: 'A',
    scope:{bar:'='},
    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";
});

If they don't share the same $scope, the only way is using angularjs events.

In first directive you put:

$rootScope.$on('myEvent', function (event, data) {
  $scope.bar = data.bar;
});

In the second one when bar change:

$scope.$emit('myEvent', {bar: bar});

Taking into account that are directives pletely unrelated.

Programmer puzzle solving

javascript - How to make a variable change in one directive to get reflected in another directve - Stack Overflow

3 Answers 3

Articles related to this article

comment list (0)