谈谈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',
            controllerAs: 'vm',
            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',
    replace: true,
    scope: {
      name: '@'
    },
    bindToController: true,
    link: link,
    controller: 'DirCtrl',
    controllerAs: 'vm',
    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