來自控制器的訪問指令元素

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: '='
        }
    }
});

這是一個演示 。

現在，“項目詳細信息”部分顯示正常，但始終位於表格的底部。 我想將指令行元素移動到相應的項目行下，但是我不確定如何訪問控制器內部的指令元素。

Answer 1

而不是讓明細行僅出現一次並四處移動，而讓ng-repeat在每一行中都包含它。 您可以使用第一個<tr>上的ng-repeat-start和最后一個<tr>上的ng-repeat-end來執行此操作。 這種特殊的語法允許重復元素的任意集合，而不必包含在同一重復元素中。 然后，您可以在指令元素上包含ng-hide ， ng-show或可能的ng-if ，僅在單擊相應的行時才顯示。

有關ng-repeat-start / end語法的更多信息，請參見此處 。

Answer 2

您不應該在控制器內訪問元素。 如果必須這樣做，那么您的應用程序設計或對Angular本身的理解就有問題。

在一般情況下，您應該開始將指令視為HTML和業務邏輯（服務，庫，模型等中的實際JS代碼）之間的膠粘劑，並應嚴格遵守這種方式。

---

在這種情況下，您可以將整個ng-repeat視為一個指令的一部分，並將詳細信息行合並到每個項目行之間。

更好的是，如果顯示詳細信息行需要用戶執行某些操作（例如單擊項目行），則可以在單擊的項目行下方動態添加/刪除詳細信息行。 由於細節數據將被“惰性”編譯，因此這將更加理想。