javascript - 从 Controller 访问指令元素

Question

在我的页面上，我有一个带有自定义指令的表格，当用户单击详细信息按钮时，该表格显示行项目的详细 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 内的指令元素。

Answer 1

不要让详细信息行仅出现一次并四处移动，而是让 ng-repeat将其包含在每一行中。您可以使用 ng-repeat-start 来执行此操作上第一<tr>和ng-repeat-end最后<tr> 。这种特殊的语法允许重复任意元素集，而不会包含在同一重复元素中。然后您可以包含 ng-hide , ng-show ，或者可能ng-if仅当单击相应的行时才显示指令元素。

有关ng-repeat-start/end syntax can be found here的更多信息.