草庐IT

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

coder 2024-05-16 原文

我有一个问题 - 我忘记了如何编码!我有一个位于父包装器标签(DIV)上的 angularJS 指令，在我的指令中我希望遍历子项(第一个子 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(可能有很多，但我在加载的 View 中看到 10 个用户)并使用数据属性在我的指令中执行某些检查和修改， $location 对象和可能更多...但是我不记得如何遍历第一个子 div，我尝试的一切似乎都出错了...到目前为止我有这个，这是行不通的!在下面的示例中，我只想将第一个子节点的 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'));
                }

            }
        };
    });

我很困惑......请帮忙!

最佳答案

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

另一件事是 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

关于javascript - 在 AngularJS 指令中循环遍历元素的子元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28737342/

javascriptAngularJSelementcodechildren

有关javascript - 在 AngularJS 指令中循环遍历元素的子元素的更多相关文章

  1. ruby - 树顶语法无限循环 - 2

    我脑子里浮现出一些关于一种新编程语言的想法，所以我想我会尝试实现它。一位friend建议我尝试使用Treetop(Rubygem)来创建一个解析器。Treetop的文档很少，我以前从未做过这种事情。我的解析器表现得好像有一个无限循环，但没有堆栈跟踪；事实证明很难追踪到。有人可以指出入门级解析/AST指南的方向吗？我真的需要一些列出规则、常见用法等的东西来使用像Treetop这样的工具。我的语法分析器在GitHub上，以防有人希望帮助我改进它。class{initialize=lambda(name){receiver.name=name}greet=lambda{IO.puts("He

  2. ruby-on-rails - 在 Ruby 中循环遍历多个数组 - 2

    我有多个ActiveRecord子类Item的实例数组，我需要根据最早的事件循环打印。在这种情况下，我需要打印付款和维护日期，如下所示:ItemAmaintenancerequiredin5daysItemBpaymentrequiredin6daysItemApaymentrequiredin7daysItemBmaintenancerequiredin8days我目前有两个查询，用于查找maintenance和payment项目(非排他性查询)，并输出如下内容:paymentrequiredin...maintenancerequiredin...有什么方法可以改善上述(丑陋的)代

  3. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样？我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用，需要1秒才能返回，我有100,000多个页面要访问，所以我试图运行多个线程来解决这个问题。有更好的方法吗？classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

  4. ruby - 在哈希的键数组中追加元素 - 2

    查看我的Ruby代码:h=Hash.new([])h[0]=:word1h[1]=h[1]输出是:Hash={0=>:word1,1=>[:word2,:word3],2=>[:word2,:word3]}我希望有Hash={0=>:word1,1=>[:word2],2=>[:word3]}为什么要附加第二个哈希元素(数组)？如何将新数组元素附加到第三个哈希元素？ 最佳答案 如果您提供单个值作为Hash.new的参数(例如Hash.new([])，完全相同的对象将用作每个缺失键的默认值。这就是您所拥有的，那是你不想要的。您可以改用

  5. 「Python｜Selenium｜场景案例」如何定位iframe中的元素？ - 2

    本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决

  6. 【Java入门】使用Java实现文件夹的遍历 - 2

    遍历文件夹我们通常是使用递归进行操作，这种方式比较简单，也比较容易理解。本文为大家介绍另一种不使用递归的方式，由于没有使用递归，只用到了循环和集合，所以效率更高一些！一、使用递归遍历文件夹整体思路1、使用File封装初始目录，2、打印这个目录3、获取这个目录下所有的子文件和子目录的数组。4、遍历这个数组，取出每个File对象4-1、如果File是否是一个文件，打印4-2、否则就是一个目录，递归调用代码实现publicclassSearchFile{publicstaticvoidmain(String[]args){//初始目录Filedir=newFile("d:/Dev");Datebeg

  7. ruby - Chef Ruby 遍历 .erb 模板文件中的属性 - 2

    所以这可能有点令人困惑，但请耐心等待。简而言之，我想遍历具有特定键值的所有属性，然后如果值不为空，则将它们插入到模板中。这是我的代码:属性:#===DefaultfileConfigurations#default['elasticsearch']['default']['ES_USER']=''default['elasticsearch']['default']['ES_GROUP']=''default['elasticsearch']['default']['ES_HEAP_SIZE']=''default['elasticsearch']['default']['MAX_OP

  8. ruby - Hanami link_to 助手只呈现最后一个元素 - 2

    我是HanamiWorld的新人。我已经写了这段代码:moduleWeb::Views::HomeclassIndexincludeWeb::ViewincludeHanami::Helpers::HtmlHelperdeftitlehtml.headerdoh1'Testsearchengine',id:'title'hrdiv(id:'test')dolink_to('Home',"/",class:'mnu_orizontal')link_to('About',"/",class:'mnu_orizontal')endendendendend我在模板上调用了title方法。htm

  9. ruby - Ruby 中的闭包和 for 循环 - 2

    我是Ruby的新手，有些闭包逻辑让我感到困惑。考虑这段代码:array=[]foriin(1..5)array[5,5,5,5,5]这对我来说很有意义，因为i被绑定(bind)在循环之外，所以每次循环都会捕获相同的变量。使用每个block可以解决这个问题对我来说也很有意义:array=[](1..5).each{|i|array[1,2,3,4,5]...因为现在每次通过时都单独声明i。但现在我迷路了:为什么我不能通过引入一个中间变量来修复它？array=[]foriin1..5j=iarray[5,5,5,5,5]因为j每次循环都是新的，我认为每次循环都会捕获不同的变量。例如，这绝对

  10. ruby - 如何遍历 Ruby 中所有正则表达式匹配的字符串？ - 2

    我们有一个字符串:“”这个正则表达式://i如何从当前字符串中获取所有匹配项？ 最佳答案 "".scan(//)参见scan在ruby​​-docs上 关于ruby-如何遍历Ruby中所有正则表达式匹配的字符串？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/6857852/

随机推荐