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
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";
});
- 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
requireis 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
3 Answers
Reset to default 3You 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.