如何從內部自定義指令中訪問ng-repeat項目

我在ng-repeat中的自定義指令有問題。一個我想總是綁定值最終被未定義：如何從內部自定義指令中訪問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模板

<!-- 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 i的item綁定我的指令？

在一般情況下，我需要創建一個冗餘的屬性結合使用NG-重演：

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

在我的指導我用"="的列綁定，所以我需要在模板中的column="column"？

感謝

來源

2015-11-19 D.C.

您希望命名的屬性'problem'，但調用者傳遞一個名爲'item'的屬性。 –

對不起，這是一個複製粘貼錯誤。應該是物品無處不在。更新。謝謝。 –

的<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

來源

2015-11-19 18:56:21 sheilak

啊是的，有些抨擊和搜索引發了我最終這一點。感謝您的確認。一旦解釋就有意義。 –

如何從內部自定義指令中訪問ng-repeat項目

回答

相關問題