Question

我遇到了问题 - 我已经忘记了如何编码！我有一个angularJS指令，它位于父包装器标签（DIV）上，在我的指令中我想循环遍历子节点（第一个子DIV）。我有以下

<div data-check-attributes>
  <div data-ng-repeat="user in Users" data-id="{{ user.ID }}" data-ng-click="doSomething(user.ID)" data-new="{{ user.newUser }}" class="">
    <div> {{ user.userName }} </div>
    <div> {{ user.userAge }} </div>
  </div>
</div>

现在在我的指令中我希望遍历第一个子div（可能有很多这些，但我在加载的视图中看到10个用户）并使用数据属性在我的指令中执行某些检查和修改， $ location对象以及可能还有更多...但是我无法记住如何遍历第一个子div，我似乎得到了我尝试的所有内容的错误...到目前为止我有这个，它没有＆＃39工作！在下面的示例中，我只想将第一个子节点的data-id写入控制台

.directive('checkAttributes', function ($location) {
        return{
            restrict: 'A',
            link: function (scope, element) {

            // will use $location later

                console.log(angular.element(element)[0]);  // this outputs the HTML
                console.log(angular.element(element)[0].children().length); // this errors, TypeError: object is not a function

                for (var i = 0; i < angular.element(element)[0].children.length; i++) {
                    console.log(angular.element(element)[0].children[i].getAttribute('data-id'));
                }

            }
        };
    });

我很困惑......请帮助！

Answer 1

如果您尝试访问HTMLElement的children属性，那么您应该像属性一样阅读它。

另一件事是element已经是angular.element的一个实例，所以不需要再次包装它：

console.log(element[0]);  // DOM element
console.log(element[0].children.length);

然而，angular.element对象提供了一组便捷方法。这些方法复制了一些jQuery的方法，包括$.fn.children方法。在这种情况下，您可以选择

console.log(element);  // angular.element instance
console.log(element.children().length);

最后，还有一点需要注意：ngRepeat会在自定义指令后呈现其元素，因此您无法访问children集合。最简单的解决方法是将您的代码包装到$timeout服务中，该服务将在下一个摘要周期中执行您的逻辑，并在ngRepeat完成后得到保证：

app.directive('checkAttributes', function($location, $timeout) { return { restrict: 'A', link: function(scope, element) { // will use $location later $timeout(function() { for (var i = 0; i < element[0].children.length; i++) { console.log(element[0].children[i].getAttribute('data-id')); } }); } }; });

演示： http://plnkr.co/edit/oEOSY2e2E0mmLDQOHbff?p=preview

循环遍历AngularJS指令中元素的子元素

1 个答案: