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