Question

为什么我们在Custom指令中需要BindToController。这种语法提供了什么，我们不使用它就无法实现。我经历了这么多文档，但没有得到我的答案。在此先感谢!!

Answer 1

您还可以在指令中使用controllerAs语法从Angular 1.3开始，您还需要添加bindToController属性，以确保属性绑定到控制器而不是范围。让我们举个例子：

(function() {

 var app = angular.module('directivesModule');

 app.directive('isolateScopeWithControllerAs', function () {

  var controller = function () {

          var vm = this;

          vm.items = {}

          vm.addItem = function () {
              //Add new customer to directive scope
              vm.items.push({
                  name: 'New Directive Controller Item'
              });
          };
  };    

  var template = '<button ng-click="vm.addItem()">Add Item</button>' +
                 '<ul><li ng-repeat="item in vm.items">{{ ::item.name     }}</li></ul>';

  return {
      restrict: 'EA', //Default for 1.3+
      scope: {
          datasource: '=',
          add: '&',
      },
      controller: controller,
      controllerAs: 'vm',
      bindToController: true, //required in 1.3+ with controllerAs
      template: template
    };
  });

 }());

在此控制器中，将vm的别名分配给controllerAs属性，并在控制器代码和视图中使用别名。 bindToController属性设置为true以确保属性绑定到控制器而不是范围。

Answer 2

Angular一直试图让用户远离将数据直接放在$ scope上，而是将数据放入控制器中。其中一个主要动机是因为控制器只是简单的类，并且更容易进行单元测试。

此外，使用控制器而不仅仅使用链接功能主要是出于同样的原因。链接函数应该只用于DOM操作和其他非角度的东西，比如包装jquery插件或直接订阅DOM事件。

所以将所有这些放在一起，这是创建自定义指令的首选方法

angular.module('app').directive('person', function() {
  return {
    restrict: 'E',
    controller: PersonDirectiveController,
    controllerAs: 'vm',
    bindToController: true,
    scope: {
      'age': '='
    },
    link: function(scope, element, attributes) {

    }
  };

});

function PersonDirectiveController() {
  var vm = this;
  vm.name = 'Bob';
  //vm.age is passed in through scope and because of bindToController
}

现在我们可以直接测试PersonDirectiveController而不必处理$ scope

describe('PersonDirectiveController', function() {
  it('has a name', function() {
    var vm = new PersonDirectiveController();
    expect(vm.name).toEqual('Bob');
  });
});

为什么我们需要在Custom指令中使用BindToController

2 个答案: