Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Learning Angular: Access Directive Scope Variables From Directive Controllers and Vice Versa

DZone's Guide to

Learning Angular: Access Directive Scope Variables From Directive Controllers and Vice Versa

· Integration Zone ·
Free Resource

The new Gartner Critical Capabilities report explains how APIs and microservices enable digital leaders to deliver better B2B, open banking and mobile projects.

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.

This article is part of my "Learning NG" series, presenting some of my adventures while learning Angular. Check out the series intro and other articles. Note, I'm an Angular newbie, so I'm more than happy for any kind of feedback and improvement suggestions from more experienced people than me.

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:

429 words - 2 min read
Learning Angular: Access directive scope variables from directive controllers and vice versa
Learn how to use directive scope variables and access them from your directive controller
Juri wrote this on January 26, 2015

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.

    This article is part of my "Learning NG" series, presenting some of my adventures while learning Angular. Check out the series intro and other articles. Note, I'm an Angular newbie, so I'm more than happy for any kind of feedback and improvement suggestions from more experienced people than me.

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:

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.

The new Gartner Critical Capabilities for Full Lifecycle API Management report shows how CA Technologies helps digital leaders with their B2B, open banking, and mobile initiatives. Get your copy from CA Technologies.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}