angularjs controller in directive using controllerAs can not work?

Question

I am trying to put some data in the scope which my directive create. Here is my jsFiddle.

the following code works well

.directive('directive1', function () {
    return: {
        scope: true,
        controller: function ($scope) {
            $scope.name = 'world';
        }
    }
})

<div directive1>
    <p>{{ name }}</p>
</div>

but these code do not work

.directive('directive2', function () {
    return: {
        scope: true,
        controller: function () {
            this.name = 'world';
        },
        controllerAs: 'testCtrl'
    }
})

<div directive2>
    <p>{{ testCtrl.name }}</p>
</div>

Is there anything wrong in my code? or did I misunderstand something about controllerAs?

I don't know if you can do that. You defined controller without $scope. What is controllerAs? — Maxim Shoustin
– Maxim Shoustin, Commented Sep 21, 2013 at 11:01

Klaster_1 Нет войне · Accepted Answer · 2013-09-21 11:28:46Z

16

ControllerAs support for directives was added in 1.2.0, so you'll have to use most recent version, instead of 1.0.2 from linked fiddle. This way it works like you wanted.

answered Sep 21, 2013 at 11:28

Klaster_1 Нет войне

12.2k9 gold badges65 silver badges75 bronze badges

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

1 Comment

user2331095 Over a year ago

You are right. After migrating to angular 1.2, it works well. thanks~!

Pascal Precht · Accepted Answer · 2013-09-21 12:54:53Z

-1

Please do not confuse with directive controller and a normal controller! So yea, a directve can have a controller, which controls something. But it's not equivalent to a normal controller!

There isn't actually a problem to put directive logic into directive controller, but the directive controller actually, is used for cross directive communication. A controller instance of one directive can be injected into another directive which sits on the same element (or child elements).

The "controller as" expression is for normal controllers. So just do your self a favour and put your logic into directives link function.

answered Sep 21, 2013 at 12:54

Pascal Precht

8,9037 gold badges43 silver badges55 bronze badges

2 Comments

user2331095 Over a year ago

Thanks for the detail of controller! Actually I am confusing with a normal controller and directive controller. Thanks again!

Ed_ Over a year ago

This answer is misleading - a directive controller is the same as a normal controller, except that instead of being instantiated by the ngController directive, it's instantiated by the directive you associate it with. It works just the same, injectables, controllerAs, everything. Logic can/should go in a directive's controller - the link function should primarily be used for DOM manipulation.

Collectives™ on Stack Overflow

angularjs controller in directive using controllerAs can not work?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related