Question

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

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

工作人员：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>

我的孩子控制器是：

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

在您的控制器中添加一个属性以存储所选项目：

$scope.itemClicked = {};

在链接功能中，在您的指令中，您可以从元素中获取所选项目：

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

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

Answer 2

控制器this内部指向当前范围对象。所以在你的情况下你可以这样做：

$scope.myItemClicked = function() {
    $('#log').append(this.myItem);
};

Sidenote，在控制器中执行DOM操作并不是很好的做法。

Answer 3

您可以使用$index，如下所示：

  <my-item item='{{myArray[$index]}}' ng-repeat="myItem in myArray">
  </my-item>

然后获取属性＆＃39; item＆＃39;指令代码中的值： // ------------------------------------------------ ---------------------------------

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

      $('#log').append($attributes['item']);

    }
  };
});

如何将ng-repeat项目对象转换为指令和子范围？

3 个答案: