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

Free Resource

The Integration Zone is brought to you in partnership with Cloud Elements. What's below the surface of an API integration? Download The Definitive Guide to API Integrations to start building an API strategy.

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.

Your API is not enough. Learn why (and how) leading SaaS providers are turning their products into platforms with API integration in the ebook, Build Platforms, Not Products from Cloud Elements.

Topics:

Published at DZone with permission of Juri Strumpflohner. See the original article here.

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}