在我的页面上,我有一个带有自定义指令的表格,当用户单击详细信息按钮时,该表格显示行项目的详细 View :
<table ng-controller="MyController">
<tr ng-repeat="item in controller.items">
<td>{{item.name}}</td>
<td> <a href="#" ng-click="controller.loadDetails(item.id)">details</a>
</td>
</tr>
<tr ng-details details-colspan="2" ng-model="controller.details"></tr>
</table>
指令:
.directive('ngDetails', function() {
return {
restrict: 'A',
require: "^ngModel",
replace: true,
template: '<tr class="detailsTemplate {{ngModel.cssClass}}"> \
<td colspan="{{detailsColspan}}" ng-bind-html="ngModel.data"></td> \
</tr>',
scope: {
detailsColspan: '@',
ngModel: '='
}
}
});
这是一个demo 。
现在项目详细信息部分显示正常,但它始终位于表格底部。我想将指令行元素移动到相应的项目行下,但我不确定如何访问 Controller 内的指令元素。
最佳答案
不要让详细信息行仅出现一次并四处移动,而是让 ng-repeat
将其包含在每一行中。您可以使用 ng-repeat-start
来执行此操作上第一<tr>
和ng-repeat-end
最后<tr>
。这种特殊的语法允许重复任意元素集,而不会包含在同一重复元素中。然后您可以包含 ng-hide
, ng-show
,或者可能ng-if
仅当单击相应的行时才显示指令元素。
关于javascript - 从 Controller 访问指令元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31465207/