How to use variable from a Controller in a Directive link function?

Question

I want to be able to use the variable "videoUrlId" from the controller 'useSpreadsheetData' below in my directive 'meetings'. How can I do this? I have looked at require but could not get it to work.

Controller:

app.controller('useSpreadsheetData', ['$scope', '$sce', 'getSpreadsheetData',      
function($scope, $sce, getSpreadsheetData){
for(var x in videos) {
      if(videos[x].switchValue) {
        var videoUrlId = videos[x].videoUrl;
        $scope.videoUrlId = videoUrlId;
        break;
      }
    }
};

Directive:

app.directive('meetings', [ 'getCalendar', '$timeout', '$window',  
function(getCalendar, $timeout, $window){
return {
    restrict: 'E',
    templateUrl: 'scripts/directives/meetings.html',
    controller: 'useSpreadsheetData',
    link: function(scope){
    //Use videoUrlId variable here
    }
}
}]);

You can access videoUrlId in your link function with scope.videoUrlId — rob
– rob, Commented Nov 23, 2015 at 22:29
In order to share data between directives and controllers or controllers and controllers, you should use Services. Take a look at this post and this other one post. — AndreaM16
– AndreaM16, Commented Nov 23, 2015 at 22:32
@rob i get undefined when I access that variable in my link function. — nehas
– nehas, Commented Nov 23, 2015 at 22:53
is the code in your controller actually running? From what you've posted videos will always be undefined — rob
– rob, Commented Nov 23, 2015 at 22:57
@AndreaM16 My controller is already getting data from a service. Is there a way to get a variable from a controller and use it in my directive link function without making another service? — nehas
– nehas, Commented Nov 23, 2015 at 22:57

lux · Accepted Answer · 2015-11-24 00:05:29Z

Since you mentioned you attempted to use require, I have to assume the meetings directive will be a child element somewhere within the useSpreadsheetData controller, however without seeing your HTML, we can't be sure.

As you're not utilizing an isolate scope, your directive will prototypically inherit from the parent controller above itself, in this case useSpreadsheetData. As a result, we can simply get videoUrlId by accessing it via an interpolated expression: {{videoUrlId}}. Note the template in the meetings directive. It'll also be available within link or controller via scope.videoUrlId and $scope.videoUrlId, respectively.

Plunker: http://plnkr.co/edit/MZIgXEiku4Z2PLzl3apz

HTML

<div ng-controller="useSpreadsheetData">
  Controller: <code>videoUrlId = {{videoUrlId}}</code><br>
  Directive: <meetings></meetings>
</div>

JavaScript

app.controller('useSpreadsheetData', function($scope) {

  var videos = [service call];

  for (var x in videos) {
    if (videos[x].switchValue) {
      var videoUrlId = videos[x].videoUrl;
      $scope.videoUrlId = videoUrlId;
      break;
    }
  }
});

app.directive('meetings', ['$timeout', '$window',
  function($timeout, $window) {
    return {
      restrict: 'E',
      template: '<code>videoUrlId = {{videoUrlId}}</code>'
    }
  }
]);

Output

Controller: videoUrlId = /1
Directive: videoUrlId = /1

Collectives™ on Stack Overflow

How to use variable from a Controller in a Directive link function?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related