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) {});});

本文地址：