命名空间、代码的一致性及合适的设计模式在软件工程中是很重要的环节，Angular的出现解决了许多前端工程师所要面临的问题。
在此分享下通过在指令中使用bindToController属性来使DOM控制更加专一，保持代码的一致性，同时在controller继承一些数据或构建的时候有更好的设计
1、使用ControllerAs
使用bindToController时建议使用controllerAs语法糖配合，这样让Controller更加的POJO，因为使用controllerAs的时候，controller会在实例化的时候在scope对象上实例一个对象属性，这样避免this和$scope作用域的坑。
<div ng-controller="MainController as vm">
<input type="text" ng-model="vm.name" />
</div>
很清晰的可以看出，如果没有ControllerAs，我们不会在Controller实例化的时候有一个原生的命名空间，而且代码的一致性也不是很好，围绕着DOM元素，看起来不是那么POJO，还有一个很重要的一点就是在继承性上的坑。
2、问题的提出
问题的所在就是，当我们在用ControllerAs语法糖的时候，为了使代码看起来更加统一POJO，但是在数据的获取不得不注入
//controller
function FooDirCtrl() {
this.bar = {};
this.doSomething = function doSomething(arg) {
this.bar.foobar = arg;
}.bind(this);
}
//directive
function fooDirective() {
return {
restrict: 'E',scope: {},controller: 'FooDirCtrl',controllerAs: 'vm',template: [
'<div><input type="text" ng-model="vm.name" /><div>'
].join('')
}
}
angular
.module('app')
.directive('fooDirective',fooDirective)
.controller('FooDirCtrl',FooDirCtrl);
现在我们需要$scope中继承一些信息，所以我们要创建对立的scope来从父级controller我们需要的信息：
function fooDirective() {
return {
...
scope: {
name: '='
},...
}
}
等等，我们现在需要注入$scope对象，我们需要保持代码的一致性，使Controller保持POJO风格，由于scope对象的注入而破坏了，所以我们不得不这样做，所以Controller变成这样了：
//controller
function FooDirCtrl($scope) {
this.bar = {};
this.doSomething = function doSomething(arg) {
this.bar.foorbar = arg;
$scope.name = arg.pop; //reference the isolate property
}.bind(this);
}
3、解决问题
这样我们的bindToController属性就可以起到作用。bindToController使继承的一些属性可以挂载到指令的controller上，只需要把bindToController属性设置为true，这样从父级作用域获取的一些属性或方法就绑定到controller上了，而不使scope上。
function fooDirective() {
return {
···
scope: {
name: '='
},bindToController: true,···
}
}
这样的话，我们就可重构下之前的controller，可以移除scope注入了：
//controller
function FooDirCtrl() {
this.bar = {};
this.doSomething = function doSomething(arg) {
this.bar.foobar = arg;
this.name = arg.prop;
}.bind(this);
}
Angular官方建议我们使用true值来绑定属性到controller，但是源码中：
if (isObject(directive.bindToController)) {
bindings.bindToController = parseIsolateBindings(directive.bindToController,directiveName,true);
}
如果bindToController的值为一个对象，就将$scope绑定到scope的对象直接绑定到controller。下面使用例子就可以看出效果：
1、scope绑定
<div ng-app="com.zzweb">
<div ng-controller="MainCtrl as vm">
<h1 ng-bind="vm.name"></h1>
<foo-directive name="{{vm.name}}"></foo-directive>
</div>
</div>
angular.module('com.zzweb',[]);
function MainCtrl() {
this.name = 'Hello Angular';
}
angular
.module('com.zzweb')
.controller('MainCtrl',MainCtrl);
function DirCtrl() {}
function fooDirective() {
function link($scope) {
}
return {
restrict: 'E',replace: true,scope: {
name: '@'
},link: link,controller: 'DirCtrl',template: [
'<div><input type="text" ng-model="name" /><div>'
].join('')
}
}
angular
.module('com.zzweb')
.controller('DirCtrl',DirCtrl)
.directive('fooDirective',fooDirective);
2、bindToController的使用（true或对象）
<div ng-app="com.zzweb">
<div ng-controller="MainCtrl as vm">
<h1 ng-bind="vm.name"></h1>
<foo-directive name="{{vm.name}}"></foo-directive>
</div>
</div>
angular.module('com.zzweb',[]);
function MainCtrl() {
this.name = 'Hello Angular';
}
angular
.module('com.zzweb')
.controller('MainCtrl',MainCtrl);
function DirCtrl() {}
function fooDirective() {
function link($scope) {
}
return {
restrict: 'E',scope: {
name: '@'
},template: [
'<div><input type="text" ng-model="vm.name" /><div>'
].join('')
}
}
angular
.module('com.zzweb')
.controller('DirCtrl',DirCtrl)
.directive('fooDirective',fooDirective);
结语：
之前，我们可能需要从父级作用域继承相关信息只能通过scope对象，如果这样的话，我们使用ControllerAs使得controller不那么POJO，同时也会因为作用域继承及this的坑，使用bindToController就可以避免这些问题。可参看这篇文章No $scope soup,bindToController in AngularJS
