谈谈Angular指令bindToController的使用1.4版本后支持

命名空间、代码的一致性及合适的设计模式在软件工程中是很重要的环节，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，但是在数据的获取不得不注入 scope的使用（这里是指 scope的独立作用域继承数据）。下面就是一个问题的开始：

//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