AngularJS:没有控制器的指令如何工作

Question

只是从这个链接中读取一篇文章http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-6-using-controllers

像ng的新手一样，我很难理解他们的代码示例。只要告诉我一个例子，人们会在没有控制器的情况下编写指令？

他们的代码

(function() {
  var app = angular.module('directivesModule');
  app.directive('isolateScopeWithController', function () {
    var controller = ['$scope', function ($scope) {
          function init() {
              $scope.items = angular.copy($scope.datasource);
          }
          init();
          $scope.addItem = function () {
              $scope.add();
              //Add new customer to directive scope
              $scope.items.push({
                  name: 'New Directive Controller Item'
              });
          };
      }],
      template = '<button ng-click="addItem()">Add Item</button><ul>' +
                 '<li ng-repeat="item in items">{{ ::item.name }}</li></ul>';
      return {
          restrict: 'EA', //Default in 1.3+
          scope: {
              datasource: '=',
              add: '&',
          },
          controller: controller,
          template: template
      };
  });
}());

指令用途：

属性：<div isolate-scope-with-controller datasource="customers" add="addCustomer()"></div>

元素：<isolate-scope-with-controller datasource="customers" add="addCustomer()"></isolate-scope-with-controller>

我们如何将客户数据直接传递给指令。基本上，我们在控制器中有模型并填充模型，然后通过隔离作用域或指令使用控制器作用域将模型数据传递给指令。我很困惑上面的代码是如何工作的，请帮助我理解。感谢

Answer 1

正在考虑的场景意味着该指令将在应用程序的一部分中使用，该部分已经有一个声明的控制器，其作用域包含属性datasource和add。反过来，新的控制器将为指令的每个实例实例化，并具有自己的隔离作用域。

实际上，创建没有控制器但使用链接函数的指令要常见得多。这些指令可以依赖于父控制器，有时执行DOM操作，绑定到JS事件，或者只是作为封装部分应用程序的手段。

您可以在这里找到一个不创建自己的控制器的指令的好例子。它取自Angular文档。在这种情况下，您会发现它甚至不属于父作用域，这意味着不涉及任何控制器。事实上，像这样的元素很可能会向父控制器报告，然后父控制器会对位置进行处理。

您可以在这里阅读更多关于指令、链接函数以及指令如何与控制器一起工作的信息。