javascript - 如何将 ng-repeat item 对象访问到指令和子范围？

Question

我在自定义元素指令中使用 ng-repeat。两个类似的问题:

1. 如何从指令的 link 处理程序访问枚举项？
2. 如何从项目的 Controller 访问枚举项目？在我的示例中，在 MyItemCtrl 中，在 $scope.myItemClicked 中。

正在工作的 plunker:http://plnkr.co/edit/64PiskrR7aGFKfrSq1up?p=preview

我的主要 HTML 如下所示:

<my-item ng-repeat="myItem in myArray"></my-item>

myItem 指令是这样创建的:

app.directive('myItem', function() {
  return {
    replace: true,
    restrict: 'E',
    templateUrl: 'myItemTemplate.html',
    link: function($scope, $element, $attributes) {

      $('#log').append('Directive link phase. How can I access myItem here?\n');

    }
  };
});

该模板 myItemTemplate.html 是:

<a href="#" ng-click="myItemClicked()" ng-controller="MyItemCtrl">
  Click here to examine: {{myItem}}<br />
</a>

我的子 Controller 是:

app.controller('MyItemCtrl', function($scope) {

  $scope.myItemClicked = function()
  {
    $('#log').append('myItemClicked(). How do I access myItem here without passing it as an argument?\n');
  };

});

我意识到我可以将 myItem 作为函数参数传递，因此更改:

ng-click="myItemClicked()"

到

ng-click="myItemClicked(myItem)

但这看起来真的很不优雅；我相信有更好的方法。对吧？

Answer 1

在您的 Controller 中添加一个属性来存储所选项目:

$scope.itemClicked = {};

在链接函数中，在您的指令中，您可以从元素中获取所选项目:

link: function(scope, element, attributes) {
  scope.itemClicked = element;
}

我在这里更新了 plunker:http://plnkr.co/edit/YtHePqSGZk9ja40sygG9?p=preview