如何在指令中使用折叠？

Question

我有这部分代码，其中第二个 <tr> 仅在“编辑”单击时出现，并出现一个我正在使用指令显示的表单。

 <table class="table">
            <tbody ng-repeat="Emp in Employees">
                <tr>
                    ...
                    <td>
                        <input type="button" class="btn btn-default" value="Edit" ng-click="isCollapsed = !isCollapsed" />
                   </td>
                </tr>
                <tr collapse="isCollapsed">
                    <td>
                        <div>
                            <employee-form></employee-form>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>

现在我的employeeForm 指令中也有一个按钮，单击该按钮会使该表单消失（isCollapsed=true）。但不知何故，这不起作用。

员工表单的标记：

<form>
    ...
    <button type="button" class="btn btn-default" value="Cancel" ng-click="isCollapsed = true" />
</form>

对此的JS部分是：

$scope.isCollapsed = true;

所以我想要的是点击employeeForm 中的Cancel 按钮，<tr> 应该消失。

Answer 1

View in Plunker

希望对你有帮助：.. HTML：

<div ng-app="myapp" ng-controller="myctrl" id="id01">

<table>
    <tbody ng-repeat="emp in Employees">
    <tr>
        <td>
            <p>{{emp}}<input type="button" value="edit" ng-click="setshowindex($index)"/></p>
        </td>
    </tr>
    <tr ng-class="{'show':$index==showing,'hide':$index!==showing}">
        <td>
            <employee-form></employee-form>
        </td>
    </tr>
    </tbody>
</table>

脚本：

angular.module('myapp',[])
        .controller('myctrl',function($scope){
            //$scope.collapsed = true;
            $scope.Employees = ['abc','xyz','klm'];
            $scope.showing = -1;
            $scope.setshowindex = function (i) {
                $scope.showing = -1;
                $scope.showing = i;
            };
        })
        .directive('employeeForm',function(){
            return {
                restrict: 'E',
                replace:true,
                template: '<form><input type="text" ng-value="emp" /><button ng-click="setshowindex(-1)">Cancel</button></form>'
            };
        });

CSS：

tr.show{
            display: table-row;
        }
tr.hide{
            display: none;
        }