他们的代码

(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事件，或者只是用作封装部分应用程序的方法。

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

您可以阅读有关指令，链接函数以及指令如何与控制器here一起使用的更多信息。

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

他们的代码

1 个答案: