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, Nov 23 '15 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](http://stackoverflow.com/questions/28219403/angularjs-passing-variable-to-scope-from-directive-to-use-it-in-controller-n) and [this other one post](http://stackoverflow.com/questions/12008908/angularjs-how-can-i-pass-variables-between-controllers). — AndreaM16, Nov 23 '15 at 22:32
@rob i get undefined when I access that variable in my link function. — nehas, Nov 23 '15 at 22:53
is the code in your controller actually running? From what you've posted videos will always be undefined — rob, Nov 23 '15 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, Nov 23 '15 at 22:57

score 1 · Accepted Answer · answered Nov 24 '15 at 00:05

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

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

1 Answers1