Exploring Angular 1.3: Binding to Directive Controllers

原文： http://blog.thoughtram.io/angularjs/2015/01/02/exploring-angular-1.3-bindToController.html

Angular1.2引入了新的语法 controllerAs, 它让scope更加清楚、干净, 让controller更加聪明. 在我们的Angular应用中使用controllerAs可以避免开发者经常遇到的一些问题.

controllerAs 做为命名空间

让我们用代码说事，有两个controller如下:

function ControllerOne($scope) {
  $scope.foo = ‘Pascal‘;
}

function ControllerTwo($scope) {
  $scope.foo = ‘Christoph‘;
}

app.controller(‘ControllerOne‘, ControllerOne);
app.controller(‘ControllerTwo‘, ControllerTwo);

HTML如下:

<div ng-controller="ControllerOne">
  {{foo}}
  <div ng-controller="ControllerTwo">
    {{foo}}
  </div>
</div>

ControllerTwo中的{{foo}}会覆盖ControllerOne中的 {{foo}}, 第一个{{foo}}会显示‘Pascal‘， 第二个{{foo}}显示‘Christoph‘.

如果我们想在ControllerTow中显示‘Pascal‘可以使用scope的$parent属性去引用父作用域:

<div ng-controller="ControllerOne">
  {{foo}}
  <div ng-controller="ControllerTwo">
    {{$parent.foo}}
  </div>
</div>

然而使用$parent不是一个好的解决方案, 因为如果嵌套一多我们的代码就不利于维护了. 想象下如果你有4层或5层嵌套. 你的代码会变成$parent.$parent.$parent.$parent, 这是不是很糟糕?

首先我们使用this替代$scope:

function ControllerOne() {
  this.foo = ‘Pascal‘;
}

function ControllerTwo() {
  this.foo = ‘Christoph‘;
}

接下来, 我们修改ngController指令，使用controllerAs语法:

<div ng-controller="ControllerOne as ctrl1">
  {{ctrl1.foo}}
  <div ng-controller="ControllerTwo as ctrl2">
    {{ctrl2.foo}}
  </div>
</div>

当使用controller的时候，我们就可以使用controllerAs. 例如在Angular的$routeProvider中我们也可以使用controllerAs.

$routeProvider.when(‘/‘, {
  templateUrl: ‘stateTemplate.html‘,
  controllerAs: ‘ctrl‘,
  controller: ‘StateController‘
});

指令也可以有controller, 所以我们在定义指令的时候也可以使用controllerAs.

app.controller(‘SomeController‘, function () {
  this.foo = ‘bar‘;
});

app.directive(‘someDirective‘, function () {
  return {
    restrict: ‘A‘,
    controller: ‘SomeController‘,
    controllerAs: ‘ctrl‘,
    template: ‘{{ctrl.foo}}‘
  };
});

在指令中使用controllerAs的问题

我们说过，当使用controllerAs的时候controller的scope绑定到controller的this对象, 也就是说this代表我们的scope. 那么当指令有自己隔离的scope时，它会如何工作呢?

下面的指令有一个隔离的scope，一个controller和一个使用controller属性的template:

app.directive(‘someDirective‘, function () {
  return {
    scope: {},
    controller: function () {
      this.name = ‘Pascal‘
    },
    controllerAs: ‘ctrl‘,
    template: ‘<div>{{ctrl.name}}</div>‘
  };
});

如果这个name要进行双向绑定该怎么做呢?

app.directive(‘someDirective‘, function () {
  return {
    scope: {
      name: ‘=‘
    },
    // ...
  };
});

如果我们在外部修改隔离scope的属性，他不会反应到controller的this对象中去. 在AngularJS1.2中, 当属性变化的时候我们使用$scope服务显示的重新对我们的scope赋值. 不要忘了把$watch的callback绑定到controller的this:

app.directive(‘someDirective‘, function () {
  return {
    scope: {
      name: ‘=‘
    },
    controller: function ($scope) {
      this.name = ‘Pascal‘;

      $scope.$watch(‘name‘, function (newValue) {
        this.name = newValue;
      }.bind(this));
    },
    // ...
  };
});

等等，开始去掉的$scope 现在又回来了. 而且现在为了进行双向绑定我们额外写了许多代码.

幸运的是, 这些在AngularJS 1.3中得到了很好的解决!

使用bindToController绑定controller

Angular 1.3在指令中引入了一个新的属性bindToController. 当设置bindToController为true时,属性是绑定到controller而不是scope.

这意味, 当controller实例化, 隔离scope的初始值绑定到this上, 将来对这些属性值的改变也会自动反应.

app.directive(‘someDirective‘, function () {
  return {
    scope: {
      name: ‘=‘
    },
    controller: function () {
      this.name = ‘Pascal‘;
    },
    controllerAs: ‘ctrl‘,
    bindToController: true,
    template: ‘<div>{{ctrl.name}}</div>‘
  };
});

看, 现在不需要$scope了.

1.4中的改善

在1.4中, bindToController更加强大.在1.4中, 我们可以把所有要绑定到隔离scope的属性移到bindToController中.

下面的例子中. 不再在scope中定义scope属性了:

app.directive(‘someDirective‘, function () {
  return {
    scope: {},
    bindToController: {
      someObject: ‘=‘,
      someString: ‘@‘,
      someExpr: ‘&‘
    }
    controller: function () {
      this.name = ‘Pascal‘;
    },
    controllerAs: ‘ctrl‘,
    template: ‘<div>{{ctrl.name}}</div>‘
  };
});