Reputation: 2710
I'm looking to pass a variable from controller to a directive I have created:
HTML
<div class="dropup inline-block" ng-repeat="event in video.events">
<event video="video"></event>
</div>
DIRECTIVE
.directive("event", function() {
return {
restrict: "E",
replace: true,
scope:{
video: '=videoObject'
},
template: '<a class="btn btn-default event-margin" ng-style="{color: video.iconColor, float: floatEvents}" type="button" data-title="{{event.title}}"><span class="fa fa-fw {{event.icon}}"></span></a>',
link: function(scope, elm, attrs) {
elm
.on('mouseenter', function() {
elm.css('background-color', scope.video.color);
elm.css('color','#FFFFFF');
})
.on('mouseleave', function() {
elm.css('background-color','#FFFFFF');
elm.css('color', scope.video.color);
});
}
};
The problem is when I add scope in the returned dict attribute it stops to work.
So the idea is to change the color of the element when I pass the mouse on the element, with the value of video.color, a variable in the $scope of the controller.
I have been looking for an answer in other posts but they don't work:
Upvotes: 1
Views: 1542
Reputation: 2710
Ok, I find a solution,
video is a scope variable of the controller. Setting scope to false
in the returned dict allows the directive to access the scope of the controller.
In this web is explained: https://www.undefinednull.com/2014/02/11/mastering-the-scope-of-a-directive-in-angularjs/
When scope is set to “true”, AngularJS will create a new scope by inheriting parent scope ( usually controller scope, otherwise the application’s rootScope ). Any changes made to this new scope will not reflect back to the parent scope. However, since the new scope is inherited from the parent scope, any changes made in the Ctrl1 ( the parent scope ) will be reflected in the directive scope.
When scope is set to “false”, the controller Ctrl1 and directive are using the same scope object. This means any changes to the controller or directive will be in sync.
Upvotes: 0
Reputation: 1907
If video is object then Add video: '=video'
,
If video is a string then add video: '@video'
.directive("event", function() {
return {
restrict: "E",
replace: true,
scope:{
video: '=video'
},
template: '<a class="btn btn-default event-margin" ng-style="{color: video.iconColor, float: floatEvents}" type="button" data-title="{{event.title}}"><span class="fa fa-fw {{event.icon}}"></span></a>',
link: function(scope, elm, attrs) {
elm
.on('mouseenter', function() {
elm.css('background-color', scope.video.color);
elm.css('color','#FFFFFF');
})
.on('mouseleave', function() {
elm.css('background-color','#FFFFFF');
elm.css('color', scope.video.color);
});
}
};
Upvotes: 1