角度嵌套指令回调答案

【问题标题】：angular nested directive callback角度嵌套指令回调
【发布时间】：2016-05-11 15:06:18
【问题描述】：

我有一个列表指令（实际上是一个表格，但这并不重要），其中每个元素都有一个工具指令（选择、编辑、删除按钮）。 tools 指令获取每个动作的回调，因此特定的控制器可以单独实现每个动作。现在我不清楚如何将所选项目传递给控制器回调。有什么想法吗？

工具指令：

Javascript：这里我定义了回调

app.directive('itemTools', function() {
return {
  restrict: 'AE',
  transclude: true,
  scope: {
    item: '=',
    selectCallback: '&',
    editCallback: '&',
    deleteCallback: '&',
    cloneCallback: '&',
    activateCallback: '&',
    deactivateCallback: '&',
  },

  link: function(scope, element, attr) {

  },
  templateUrl:'templates/common/item.tools.html',
  controller: function($rootScope, $scope) {
  }
}

});

HTML：

<div>
 <button ng-click="selectCallback({id: item.id})">
 </button>
 <button ng-click="editCallback({id: item.id})">
 </button>
 <button ng-click="deleteCallback({id: item.id})">
 </button>
 <button ng-click="cloneCallback({item: item})">
 </button>
 <button ng-click="activateCallback({item: item})">
 </button>
 <button ng-click="deactivateCallback({item: item})">
 </button>
</div>

列表指令：这些回调被进一步处理到 item-tools

app.directive('moduleList', function() {
return {
  restrict: 'E',
  scope: {
    modules: '=',
    selectCallback: '&',
    editCallback: '&',
    deleteCallback: '&',
    cloneCallback: '&',
    activateCallback: '&',
    deactivateCallback: '&',
  },
  templateUrl:'templates/module/module.list.html',
  controller: function($scope) {

  }
}

});

HTML：

<table class="table table-responsive">
  <tbody>
    <tr ng-repeat="item in items | orderBy:orderByField:reverseSort>
      <td class="text-center">
        SOME DATA OF THE OBJECT....
      </td>
      <td>
        <item-tools
        item="item"
        select-callback="selectCallback({id: item.id})"
        edit-callback="editCallback(item.id)"
        delete-callback="deleteCallback(item.id)"
        clone-callback="cloneCallback(item)"
        activate-callback="activateCallback(item)"
        deactivate-callback="deactivateCallback(item)">
        </item-tools>
      </td>
    </tr>
  </tbody>
</table>

到目前为止，我已经知道了，控制器函数被调用，但我不知道如何传递所选项目本身。

提前致谢。

【问题讨论】：

一般来说，如果你有嵌套指令，你必须链接父指令控制器（参见角度示例：plnkr.co/edit/xgrXXIbEQvqiGSQRebYQ?p=preview）。您将基本上在父指令中打开一个 API，以便子指令与之交谈。如果您希望您的父指令与控制器对话，您可以使用 $broadcast 并监听控制器中的事件。有意义吗？
谢谢，使用事件的好主意。但在这种情况下，我更喜欢 $emit 而不是 $broadcast。

标签： javascript angularjs angularjs-directive callback

【解决方案1】：

通过将父指令控制器分配给子指令，子指令链接到父指令：

// parent directive
app.directive('parentDirective', function() {
    return {
        controller: function() {
            this.hello = function() {
                return 'Hello World';
            };
        }
    };
});

// child directive
// you require the parent controller by the ^ctrlName
app.directive('childDirective', function() {
    return {
        require: '^parentDirective', // require the parent controller
        link: function(scope, element, attrs, ctrl) {
            // you have access to the parent API
            ctrl.hello(); // returns 'Hello World'
        }
    };
});

【讨论】：