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