【转】Angular 'Controller As'用法

AngularJS 1.2版本中提供了Controller As语法,简单说就是可以在Controller中使用this来替代$scope,使得Controller更像一个传统的JS类,相对于$scope的继承树要理解上要简单一些。

基础用法

传统的Controller是这样写的:

app.controller('MainCtrl', function($scope) {
    $scope.title = 'Some title';
});

这种写法下,$scope是注入到MainCtrl中的服务,是Dom元素和Controller之间的粘合剂。

    { { title } }

这个孤单的title常常让初学者疑惑。

在AngularJS 1.2版本之后,我们可以这样写:

app.controller('MainCtrl', function() {
    this.title = 'Some title';
});

这种写法下,MainCtrl更像是一个JS类:

var MainCtrl = function() {
    this.title = 'Some title';
};
var main = new MainCtrl();

在页面上使用时就可以使用Controller As语法,实例化对象

    { { main.title } }

嵌套块

这种理解上的好处在嵌套块中更加明显:

    { { title } }
            { { title } }
                    { { title } }

这个title可能是$scope继承树上的任意一个。而使用Controller as之后:

    { { main.title } }
            Scope title: { { another.title } }
        Parent title: { { main.title } }
                    Scope title: { { yet.title } }
            Parent title: { { another.title } }
            Parent parent title: { { main.title } }

这就清晰很多。

Directive用法

在Directive中,我们可以这样使用:

app.directive('myDirective', function() {
    return {
        restrict: 'EA',
        template: '{ { my.title } }',
        controller: function() {
            this.title = 'Some title';
        },
        controllerAs: 'my'
    };
});

$watch

只是$watch还是需要注入$scope:

app.controller('MainCtrl', function($scope) {
    this.title = 'Some title';

    $scope.$watch(angular.bind(this, function() {
        return this.title;
    }), function(newVal, oldVal) {});
});