javascript - 展开隐藏元素

Question

所以我的问题是，如何在 AngularJS 中迭代数组时创建可扩展树。我的意思是我可以让它工作，他们一起扩展/解决的问题。

我的html:

[...]
<div ng-repeat="item in items">
    <div class="item-title" ng-click="setState()">{{ item.title }}</div>
    <div class="item-container" show-me="isShown">
         {{ item.content }}
    </div>
</div>

我的js:

[...]
//in controller:

$scope.isshown = false;
$scope.setState = function() {
    $scope.isshown = !$scope.isshown;
};
[...]
.directive("showMe", function($animate) {
    return function (scope, element, attrs) {
        scope.$watch(attrs.showMe, function(newVal) {
            if(newVal) {
                $animate.addClass(element, 'show');             
            } else {
                $animate.removeClass(element,'show');
            }
        });
    };
});

所以这基本上会打开每个项目。我已经寻找了三天的解决方案，我真的不想用 $(div#blabla)-s 制作特别长的 jquery 东西。有什么想法吗？

Answer 1

您可以修改指令以使用隔离范围:

.directive("showMe", function($animate) {
    return {
        scope: {},
        link: function (scope, element, attrs) {
            scope.showMe = false;
            scope.$watch('showMe', function(newVal) {
                if(newVal) {
                    $animate.addClass(element, 'show');             
                } else {
                    $animate.removeClass(element,'show');
                }
            });
        }
    };
});

-- 编辑以回答下面评论中的问题--

要从指令外部访问隔离范围，您可以使用 Angular 元素。使用 JavaScript 通过 document.getElementById、document.getElementsByClassName、document.querySelector 等获取节点。获得所需的元素后，请执行以下操作。

var node = document.getElementById('MyElement');
var el = angular.element(node);
var scope = el.scope();
scope.showMe = false;

或者，您可以创建一个监听器来控制指令内的值，如下所示:

.directive("showMe", function($animate) {
    return {
        scope: {},
        link: function (scope, element, attrs) {
            scope.showMe = false;

            element.bind('click', function(e) {
                e.preventDefault();
                scope.$apply(function() {
                    scope.showMe = !scope.showMe;
                });
            });

            scope.$watch('showMe', function(newVal) {
                if(newVal) {
                    $animate.addClass(element, 'show');             
                } else {
                    $animate.removeClass(element,'show');
                }
            });
        }
    };
});