AngularJS Directive controllerAs syntax & scope

Question

Here is my Code:

// HTML

<body>
  <h1>{{foo.name}}</h1>

  <my-directive></my-directive>
</body>

// Scripts

app.directive('myDirective', function() {
return {
    restrict: 'E',
    replace: true,
    scope: true,  //**********
    template: '<h4>{{foo.name}}</h4>',
    controllerAs: 'foo',
    controller: fooCtrl,
    link: function(scope) {
        console.log(scope);
    }
}
});

var fooCtrl = function() {
    this.name = 'FOO';
}

My Question:

If I use controllerAs syntax and don't set scope: true in myDirective, the controller will become global, so the controller will insert foo.name into Tag. But once I set the scope as true, the controller will only apply on myDirective.

How could this happened? Does a controller inside directive create a new scope that inherits from the surrounding scope? Why it will apply on global?

UPDATE

This is a very silly question, as I always use isolate scope before, so forget about the usage of scope inside directive, read the docs and clearly understand. Thanks for answer

Tharaka · Accepted Answer · 2014-03-27 04:30:09Z

5

I guess your are asking regarding the scope property in Angular Directives. Also I presume you mean $rootScope by term 'global'. As explained in this guide, In a directive, scope property behaves as follows,

scope.false

The default option which does not create a new scope for a directive but shares the scope with its parent

scope.true

Creates a new scope but prototypically inherits from the parent scope.

scope: ‘isolate’

Creates an isolated scope which does not prototypically inherit from the parent scope but you can access parent scope using scope.$parent

answered Mar 27, 2014 at 4:30

Tharaka

2,3951 gold badge21 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jon7 · Accepted Answer · 2014-03-27 04:30:44Z

3

Check out the directive documentation and scroll down a bit to the part about the scope option. Setting scope to true creates a new scope that the controller is attached to. Not setting scope defaults it to false, which causes the directive to use the parent scope. That's why the controller is being attached to the parent scope.

answered Mar 27, 2014 at 4:30

Jon7

7,2352 gold badges35 silver badges39 bronze badges

1 Comment

Neaped Over a year ago

Thanks, Jon. I was keep thinking that inside the directive, controller will only apply on it's scope, set scope to true just create a 'child' scope under the directive's scope. >.<

Collectives™ on Stack Overflow

AngularJS Directive controllerAs syntax & scope

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related