может нг скрытие вызова функции в угловом

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.

И поэтому я хотел бы, чтобы строка детали была скрыта, только если родительский тент 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> 

Controller Код для этого вопроса:

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