Question

我的表調用函數看起來像這樣，與一個以上的tbody：

<tbody> 
    <tr class='group-header' ng-click="collapseDetail($event)"> ... </tr> 
    <tr class='detail' ng-hide="groupIsCollapsed()">...</tr>    
    <tr class='group-footer'> ... </tr> 
    </tbody> 

    <tbody> 
    <tr class='group-header' ng-click="collapseDetail($event)"> ... </tr> 
    <tr class='detail' ng-hide="groupIsCollapsed($event)">...</tr>    
    <tr class='group-footer'> ... </tr> 
</tbody> 

在我collapseDetail()功能切換我一個類collapsed上tbody。

所以我希望只有在父tbody hasClass（'collapsed'）時纔會隱藏詳細信息行。

這是合法嗎？我有什麼不工作：

$scope.collapseDetail = function (e) { 
    var targ = angular.element(e.currentTarget); 

    $scope.$apply(function(targ){ 
     targ.parent().toggleClass('collapsed'); 
    }); 
} 

$scope.groupIsCollapsed = function (e) { 
    if (e == undefined) return false; 
    var targ = angular.element(e.currentTarget); 
     return targ.parent().hasClass('collapsed'); 
} 

Answer 1

舉了一個更簡潔的解決方案必須在爲您創造一個指令工作，因爲在這裏你需要在個人TBODY一個孤立的範圍，使他們可以顯示/隱藏詳情。

使用角指令具有許多優點等

1. 具有分離範圍（如上所述）
2. 減少HTML標記
3. 在控制器NO DOM操作（嚴格的無取角透視考慮到所有的DOM操作僅在 指令中完成，使得它更易於維護）

HTML代碼：

<table> 
    <tbody rendered key="assasa" val="tgtrtghrt"></tbody> 
    <tbody rendered key="fsfgsd" val="teeger"></tbody> 
</table> 

控制器代碼爲這樣一個問題：

angular.module('t', []) 
//You can see that nothing is in the controller now 
.controller('test', function ($scope) {}); 

指令代碼：

.directive('rendered', function ($compile) { 
    return { 
     restrict: 'EA', 
     replace: false, 
     scope: { 
      key: '@', 
      val: '@' 
     }, 
     link: function (scope, element, attrs) { 
      var ele = "<tr ng-init='collapseTbody = false;' class='group-header' ng-click='collapseTbody=!collapseTbody'><td>{{key}}</td></tr><tr class='detail' ng-hide='collapseTbody'><td>{{val}}</td></tr>"; 
      scope.$watch('key', function() { 
       element.html(ele); 
       $compile(element.contents())(scope); 
      }); 
     }, 
    } 
}); 

Working Fiddle

更多關於Angular Directives