Question

在我的页面上，我有一个带有自定义指令的表格，当用户点击详细信息按钮时，该指令会显示行项目的详细视图：

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

现在项目详细信息部分显示正常，但它始终位于表格的底部。我想将我的指令行元素移动到相应的项行下，但我不确定如何访问控制器内的指令元素。

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。

的更多信息

Answer 2

您不应该访问控制器内的元素。如果你必须这样做，那么你的应用程序设计或你对Angular本身的理解都会出现问题。

总的来说，你应该开始考虑你的指令作为HTML和业务逻辑之间的粘合剂（你的服务，库，模型等中的实际JS代码......）并且非常严格地保持这种方式

在这种特殊情况下，您可以将整个ng-repeat视为一个指令的一部分，并在每个项目行之间合并细节行。

更好的是，如果显示详细信息行需要用户执行某些操作，例如单击项目行，则可以动态追加/删除单击项目行下方的详细信息行。这将更加优化，因为详细数据将是“懒惰”编译的。

来自控制器的Access指令元素

2 个答案: