Angular: Pass variable to directive

Question

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:

You need to use `scope: {video: '='}` in your code it will search for `video-object` attribute. — jcubic, Aug 26 '16 at 09:14
It's not working, I have tested this, but I don't know why is not working — Albert Lazaro de Lara, Aug 26 '16 at 09:16

score 1 · Answer 1 · answered Aug 26 '16 at 09:18

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);
        });
      }
    };

It doesn't work, when I add scope to the returned dict it doesn't apply the ng-style — Albert Lazaro de Lara, Aug 26 '16 at 09:19
see if you have to pass any value from controller to directive then just pass scope variable in HTML page on directive element then in directive call that variable as `video: '=video'`, even if it will not work then try by removing replace true property. And make sure that whatever scope value you are passing in html it is available in that part of scope — ojus kulkarni, Aug 26 '16 at 09:23

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

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.

Angular: Pass variable to directive

2 Answers2