我正在使用显示为可折叠树的自定义复选框创建自定义指令。这是指令。

app.directive('customSgTree',function () {
    var treeController = ['$scope',function ($scope) {

        $scope.collapseChildren = true;
        $scope.arrowState = "keyboard_arrow_right";

        function init() {
            updateArrowState();
        }

        init();

        function updateArrowState() {
            if ($scope.collapseChildren)
                $scope.arrowState = "keyboard_arrow_right";
            else
                $scope.arrowState = "keyboard_arrow_down";
        }

        $scope.toggleCollapse = function () {
            $scope.collapseChildren = !$scope.collapseChildren;
            updateArrowState();
        }
    }];

    return {
        restrict: 'E',scope: {
            tree: '=ngModel',class: '@'
        },template: "<ul class='{{class}}'>"
                    + "<custom-checkbox ng-model='p.checked' ng-repeat='p in tree'>"
                        + "<i class='custom-checkbox-caret material-icons' ng-click='toggleCollapse()'>{{arrowState}}</i>"
                        + "<span class='custom-checkbox-label'>{{p.name}}</span>"
                        + "<ul ng-if='p.children.length > 0 && !collapseChildren'>"
                            + "<custom-checkbox ng-model='c.checked' ng-repeat='c in p.children'>"
                            + "<span class='custom-checkbox-label'>{{c.name}}</span>"
                            + "</custom-checkbox>"
                        + "</ul>"
                    + "</custom-checkbox>"
                +"</ul>",controller: treeController
    }
});

问题是此行"<i class='custom-checkbox-caret material-icons' ng-click='toggleCollapse()'>{{arrowState}}</i>"。单击后，所有其他自定义复选框实例将被展开/折叠。如何隔离$scope.collapseChildren变量以仅影响该复选框的实例？