Javascript 扩展隐藏元素

所以我的问题是，如何在遍历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>

因此，这基本上打开了每个项目。我已经找了3天的解决方案了，我真的不想用$（div#blabla）-s生成异常长的jquery。有什么想法吗？

你可以：

<div ng-repeat="item in items">
    <div class="item-title" ng-click="item.isShown = !item.isShown">{{ item.title }}</div>
    <div class="item-container" ng-show="item.isShown">
         {{ item.content }}
    </div>
</div>

{{item.title}
{{item.content}

---

您不需要任何额外的javaScript代码。

该范围在指令的所有实例中共享，因此每个

showMe

都会检查相同的

isshown

变量。一个简单的解决方案是如下修改代码：

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

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

---

在这里，您将该项用作数据源以及保持“开放”状态的对象。指令的watch将调用控制器中的isShown函数，从中提取该项的状态。或者，您可以在存储每个显示项的其他位置使用数组（当然在隐藏时删除），而iShown只检查数组中是否包含该项。

您可以修改指令以使用隔离作用域：

.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.getElementsByCassName、document.querySelector等获取节点。获得所需元素后，请执行以下操作

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

或者，您可以创建一个侦听器，在指令中控制其值，如下所示：

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

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

---

如何从指令外部修改隔离作用域的

showMe

，以便控制其状态？好问题，我将修改答案以显示这一点。