角度嵌套指令回调

angular nested directive callback

本文关键字：回调 指令 嵌套      更新时间：2023-09-26

我有一个list指令（实际上是一个表，但这无关紧要），其中每个元素都有一个tools指令（选择、编辑、删除按钮）。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>

list指令：这些回调被进一步处理到项目工具

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>

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

提前谢谢。

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

// 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'
        }
    };
});
相关文章：