Angularjs ng hide能否以角度调用函数

我的桌子看起来像这样，有多个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>

---

为了给出一个更简洁的解决方案，必须为您创建一个指令，因为在这里，您需要一个单独的tbody范围，以便它们可以显示/隐藏细节

使用角度指令有许多优点，如

具有独立范围（如上所述）

减少html标记

控制器中没有DOM操作（严格来说，不考虑角度透视，所有DOM操作只能在 指令（使其更易于维护）

HTML代码：

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

指令代码：

.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);
            });
        },
    }
});

指令（'rendered'，函数（$compile）{ 返回{ 限制：“EA”， 替换：false， 范围：{ 键：“@”， 瓦尔：“@” }, 链接：函数（范围、元素、属性）{ var ele=“{key}}{{val}}”； 范围：$watch（'键'，函数（）{ html（ele）； $compile（element.contents（））（范围）； }); }, } });

---

更多关于

的信息，谢谢。密钥/值代码是否是此解决方案的重要组成部分？我正试着把它弄清楚。是的。。正如在小提琴中一样，你可以看到键将是标题，单击它可以展开并给出值。。。

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);
            });
        },
    }
});