Angular Controller as NewController 2 way binding works with this.function

Question

I'm trying to understand why I must use the as in order that the two-way binding will work with this inside a controller.

working example:

<div ng-controller="MyController as TestController">
    {{TestController.test()}}
</div>
<script>
    var app = angular.module('myApp', []);

    app.controller('MyController', function(){
        this.test = function test(){
            return "test";
        };
    });
</script>

not working example:

<div ng-controller="MyController">
    {{MyController.test()}}
</div>
<script>
    var app = angular.module('myApp', []);

    app.controller('MyController', function(){
        this.test = function test(){
            return "test";
        };
    });
</script>

What don't you understand about it? Using `as` allows for two-way binding during the `$digest` cycle. Otherwise, angular wouldn't have a handle on the controller. — Davin Tryon, Feb 09 '15 at 11:39

score 1 · Answer 1 · edited May 23 '17 at 11:56

1

If you want to use this in your controllers you need to use the controller as syntax otherwise you have to use $scope in your controllers. If you didn't use controller as the controller would need to be:

app.controller('MyController', function($scope){
    $scope.test = function test(){
        return "test";
    };
});

and the view would need to be:

<div ng-controller="MyController">
    {{test()}}
</div>

One of the benefits of the controller as syntax is it helps to promote the use "dotted" object in the View which helps to avoid any reference issues that may occur without "dotting". For more info on scope reference issues take a look at this post

edited May 23 '17 at 11:56

Community

1
1

answered Feb 09 '15 at 11:40

Wayne Ellery

7,888
1
28
45

Hi, Thanks. I know how to work with controllers, but i don't understand why the "as" allow me to work with "this" – Oron Bendavid Feb 09 '15 at 11:44
1

It's because Angular added the `controller as` syntax in 1.2 which enables you to work with `this`. `ng-controller="MyController as myController"`. Think of it as `var myController = new MyController();`. It's essentially scoping an instance of MyController to myController. – Wayne Ellery Feb 09 '15 at 11:50

Emil Kantis · Answer 2 · 2015-02-09T11:53:13.247

0

Not really an answer to your question, but normally you'd define functions you want to invoke from the DOM on the Controller's $scope.

Example:

<div ng-controller="MyController">
    {{test()}}
</div>
<script>
    var app = angular.module('myApp', []);

    app.controller('MyController', function($scope){
        $scope.test = function test(){
            return "test";
        };
    });
</script>

http://plnkr.co/edit/lbgG9MCJ1kNBhArLpEpc?p=preview

Edit: Sorry, forgot to update the code in my post. The plnkr should've been right all along though.

edited Feb 09 '15 at 11:53

answered Feb 09 '15 at 11:41

Emil Kantis

1,069
7
17

The code you posted there is exactly what the OP posted. You only use $scope if you are not using the `controller as` syntax. – Wayne Ellery Feb 09 '15 at 11:43
Hi, Thanks. I know how to work with controllers, but i don't understand why the "as" allow me to work with "this" – Oron Bendavid Feb 09 '15 at 11:44

score 0 · Answer 3 · answered Feb 09 '15 at 12:04

Thanks to Wayne Ellery:

It's because Angular added the controller as syntax in 1.2 which enables you to work with this. ng-controller="MyController as myController". Think of it as var myController = new MyController();. It's essentially scoping an instance of MyController to myController.

Angular Controller as NewController 2 way binding works with this.function

3 Answers3