扩展隐藏元素

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

因此，这基本上打开了所有项目。 我一直在寻找解决方案已有3天了，我真的不想使用$（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');
                }
            });
        }
    };
});

Answer 2

您可以这样做：

<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>

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

Answer 3

作用域在指令的所有实例之间共享，因此每个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>

并在控制器中：

$scope.setState = function(item) {
    item.isshown = !item.isshown;
};
$scope.isShown = function(item) {
    return item.isshown;
};

在这里，您可以将该项目用作数据源，也可以将其用作持有“开放”状态的对象。 指令的监视程序将在控制器中调用isShown函数，在该函数中将提取该项目的状态。 （可选）您可以在存储每个显示的项的其他地方使用数组（当然，也可以在隐藏状态下使用该数组），而isShown只是检查数组中是否包含该项。