angularjs - 通过id

Question

我想在基于id的元素中找到一个元素。我该怎么做 ？我知道有

 angular.element(document.queryselector("#id"));

用于选择元素。但是如何在AngularJS中的元素中查找元素呢？

 <div id="outerID1">
    <div id="innerID">I am an inside element</div>
 </div>
 <div id="outerID2">
    <div id="innerID">I am an inside element</div>
 </div>
 <div id="outerID3">
    <div id="innerID">I am an inside element</div>
 </div>

要在jQuery中找到它，

var innerElement = $("#outerID2").find("#innerID");

想想我正在动态生成多个div。它的外部div id对于所有div而言是不同的，而内部id div是相同的。在这种情况下，我们如何解决这个问题？

Answer 1

来自angular.element上的文档：

  

find（） - 仅限于按标记名称

进行查找

您可以访问children（），contents（）和data（）实现，因此您通常可以找到解决方法。

<强> EDITS

您可以尝试这样的事情

  var parentElement = angular.element( document.querySelector( '#'+parentId ) ).children();
  for(var i=0;i<parentElement.length;i++){
    if(parentElement[i].id === childId)
    {
      alert(parentElement[i].getAttribute('name'));
    }
  }

同时演示链接here

Answer 2

如果您在应用中加载了jQuery，请使用angular.element('#outerID2 #innerID')。 否则，请使用angular.element(document.querySelector('#outerID2 #innerID'))

根据下面角度的文档，angular.element是jQuery的简易版本，它有一个jQuery中常用的函数子集。为了您的目的，通过他们的ID获取元素就足够了。

  

angular.element    - 模块中的函数ng将原始DOM元素或HTML字符串包装为jQuery元素。

     

如果jQuery可用，angular.element是jQuery的别名   功能。如果jQuery不可用，则angular.element委托给   Angular的内置jQuery子集，名为＆＃34; jQuery lite＆＃34;或jqLit​​e。

     

jqLit​​e是一个微小的，API兼容的jQuery子集，允许使用Angular   以跨浏览器兼容的方式操作DOM。 jqLit​​e   仅实现目标最常用的功能   占地面积很小。

     

要使用jQuery，只需确保在angular.js文件之前加载它。   您还可以使用ngJq指令指定jqlite应该是   用于jQuery，或者使用特定版本的jQuery（如果是多个）   版本存在于页面上。

Answer 3

你可以直接做

 var now =  angular.element(element.getElementsByClassId("innerID"));
 alert(now);