Albert Lazaro de Lara
Albert Lazaro de Lara

Reputation: 2710

Angular: Pass variable to directive

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

Answers (2)

Albert Lazaro de Lara
Albert Lazaro de Lara

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

ojus kulkarni
ojus kulkarni

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

Related Questions