列表中项目的动态点击功能的指令......几乎就在那里

Question

我有一个列表，根据某些情况，我需要在单击某个项目时调用不同的函数。

我制作了一个呈现列表模板的指令。我想在该指令中指定单击项目时调用的函数。

controller..
  $scope.dataArray = dataFromService;
  $scope.showDetailsInModal = function(item) {
    // item is always undefined here :(
  }

<div my-list="dataArray" on-item-click="showDetailsInModal()"></div>

directive...
  scope: {
    data: '=myList',
    onItemClick: '&',
  },
  templateUrl: template.html

template.html:

<ul>
  <li ng-repeat="item in data"
      ng-click="onItemClick(item)">
  </li>
</ul>

该函数被调用（是的）但是在该函数中使用时传入参数的项目未定义..太棒了..我不知道为什么

感谢您的帮助，一直以来！

Answer 1

要将参数从指令传递给回调函数，请尝试进行以下更改。

template.html:

<ul>
  <li ng-repeat="item in data"
      ng-click="onItemClick({argItem:item})">
  </li>
</ul>

你的主要 HTML

<div my-list="dataArray" on-item-click="showDetailsInModal(argItem)"></div>

在这里，我们需要以对象的形式传递参数，这个对象的键将映射到模板中分配的函数参数。

查看 plunker 中的工作示例，展示如何将参数从指令传递给函数。

希望这会有用。

列表中项目的动态点击功能的指令......几乎就在那里

Directive for a dynamic click function for items in a list... almost there

javascript

angularjs

angularjs-directive

angularjs-scope