Angular directives can have a separate, isolated scope, which is even the suggested approach most of the time. And they can have directive controllers. But…how do I access the directive’s scope variables from the directive controller and vice-versa?? It’s quite simple, read on and see it yourself.

I’m having an isolated directive which has some scope properties defined on it. Here’s a dummy example:

app.directive('myDirective', function(){
  return {
    restrict: 'E',
    scope: {
      directivevariable: '='
    },
    template: 'Hi, {{ directivevariable }}'
    ...
  }
});

As can be seen, we can directly refer to the scope variables from the directive’s template.

But what about if I have a directive controller and within that controller I’d like to use the variable defined on the directive scope to invoke some service and finally display the result from that service call onto the directive’s template?? Do I have access to the directive’s scope variables from within a directive controller?

Yes. You do, like this:

app.directive('myDirective', function(){
  return {
    restrict: 'E',
    scope: {
      directivevariable: '='
    },
    template: 'Hi, {{ directivevariable }}',
    controller: function($scope, externalService){
        // accessing the directive's scope variable
        externalService.doSomethingUseful($scope.directivevariable);
    },
    controllerAs: 'vm'
  }
});

As you can see, I use the $scope to get access to the directive variable. Similarly, I can access a controller’s scope variables through the proper “controller as” variable name, in my example vm:

app.directive('myDirective', function(){
  return {
    restrict: 'E',
    scope: {
      directivevariable: '='
    },
    template: 'Hi, {{ directivevariable }}. And I am from the controller: {{ vm.controllerVariable}}.',
    controller: function($scope, externalService){
        var vm = this;
        // accessing the directive's scope variable
        externalService.doSomethingUseful($scope.directivevariable);

        vm.controllerVariable = 'hi from the controller';
    },
    controllerAs: 'vm'
  }
});

Here’s a Plunker example that illustrates some scenarios:

Update: bindToController in Angular 1.4

Angular v1.4.x introduced the bindToController option which allows to have variables passed to a directive to be bound directly to the corresponding directive controller instance. As such, we can get rid of $scope, which is the suggested practice for moving on towards Angular 2.0.

The example from before can be rewritten to:

app.directive('myDirective', function(){
  return {
    restrict: 'E',
    template: [
        '<b>From directive scope:</b> {{ directivevariable }}{% endraw %}<br/>',
        '<b>From directive controller:</b> {{ vm.controllerVariable }}{% endraw %}<br/>',
        '<b>Adapted by directive controller:</b> {{ vm.controllerAdapted }}{% endraw %}'
      ].join(''),
    scope: {
    },
    bindToController: {
      directivevariable: '='
    },
    controller: function(){
      var vm = this;
      vm.controllerVariable = 'Hi, I am from the controller';
      vm.controllerAdapted = vm.directivevariable + '(ctrl adapted)';
    },
    controllerAs: 'vm'
  }
});

Here’s the updated Plunker:

Note: When I have more complex inline templates I use Todd Motto’s suggestion to use an array:

app.directive('myDirective', function(){
  return {
    ...
    template: [
        '<div>',
            '<p>This is a p block within the div</p>',
        '</div>'
        ].join(''),
    ...
  }
});

This allows to nicely format the HTML template when having it hard-coded within the JavaScript code. Nevertheless, if it gets more complex, use the templateUrl property and an external HTML file.