Question

我在ng-repeat中遇到了我的自定义指令的问题。我试图绑定的值之一总是最终未定义：

ItemList模板

<div>
  <table>
    <thead>
      <tr>
        <th ng-repeat="column in itemContext.columns">{{column.heading}}</th>
      </tr>
    </thead>
    <tbody>
      <!-- Also experimented leaving item='item' out as well -->
      <tr item="item" ng-repeat="item in itemList.items">
        <item-column item="item" column="column" ng-repeat="column in itemContext.columns"></item-column>
      </tr>
    </tbody>
  </table>
</div>

ItemColumn Template

<!-- Problems here because item is undefined -->
<td ng-class="columnClasses(column, item)">{{column.itemField(item)}}</td>

指令

.directive('itemColumn', ["$rootScope", function($rootScope) {
  return {
    restrict: 'E',
    replace: 'true',
    templateUrl: '/templates/itemColumn.html',
     scope:{
       item: "=",
       column: "="
    },
    link: function(scope, element, attrs) {

      console.log("-- Loading item column --");
      // sope.column is what I would expect, but scope.item is undefined
      console.log(scope);
    }
  };
}])

我需要做些什么才能在我的指令中从ng-repeat访问item绑定？

通常，使用ng-repeat时是否需要创建冗余属性绑定：

<item-column item="item" column="column" ng-repeat="column in itemContext.columns"></item-column>

在我的指令中，我使用"="作为列绑定，所以我需要模板中的column="column"吗？

谢谢

Answer 1

<tr>标记只能包含<td>和<th>元素，因此以下结构不是有效的HTML，也不会按照浏览器的预期方式进行解析（使用或没有AngularJS）。

<tr>
    <item-column></item-column>
</tr>

您可以通过检查当前解决方案的生成的HTML来确认。

如果要在<td>元素上放置指令，则应将其更改为类或属性，例如

。

HTML：

<tr>
    <td item-column item="item" ...></td >
</tr>

JS：

restrict: 'A',

Simplified Fiddle

如何从内部自定义指令访问ng-repeat项目

1 个答案: