JavaScript无法找到angularjs生成的div

这是我的angularjs生成的ng repeat，用于在滑块中加载图像。然后我使用javascript获取imageHolder下的div。 java脚本如下所示。问题是java脚本找不到angularjs生成的div，但是如果我在那里硬编码一个div，javascript就会找到它。 有解决办法吗

 <div id="imageHolder" style="width:527px" >
                  <div alt="{{l.link}}" style="background-color:white; background-image:url({{l.link}}) ;
                  background-repeat:no-repeat; background-size:contain;
                  background-position:center; width:70px;height:85px;
                  display:inline-block;border: 1px solid #C1C1C1; margin:8px;
                  float-inherit"
                  ng-repeat="l in imageLinks "  
                  ></div>


                  <div alt="img/nex1.jpeg" style="background-color:white; background-image:url(img/nex1.jpeg) ;background-repeat:no-repeat; background-size:contain;background-position:center; width:70px;height:85px;display:inline-block;border: 1px solid #C1C1C1; margin:8px;float-inherit">
                  </div>


                </div>

---

“内部悬停函数”针对硬编码的div打印，但不针对angularjs生成的div打印。

由于div稍后生成，.hover不识别这些div， 将.on jquery事件用作

$(document).on( "hover","#imageHolder div", function() {
  console.log('inside hover function');
});

---

您确定在进行绑定时这些div在Dom中可用吗

我想这可能是问题所在。

而不是

$('#imageHolder div').hover(function(){
console.log('inside hover function');});

你应该这样做

$('#imageHolder').on('hover', 'div', function(){
console.log('inside hover function');});

---

这是因为在执行“bind”调用时，div不存在。“on”方法捕获所有div，因为它将处理程序附加到父元素。

尝试使用指令和属性div:，在编译html后调用link函数，因此将应用ng repeat

//index.html

<div id="imageHolder" style="width:527px" >
    <div alt="{{l.link}}" style="background-color:white; 
          background-image:url({{l.link}}) ;
          background-repeat:no-repeat; background-size:contain;
          background-position:center; width:70px;height:85px;
          display:inline-block;border: 1px solid #C1C1C1; margin:8px;
          float-inherit"
          ng-repeat="l in imageLinks " my-directive>
    </div>
</div>

---

应该使用角度指令将行为附加到元素。对于悬停，有角度

定义要在控制器上调用的函数：

$scope.onHover = function(l) {
    console.log('inside hover function', l.link);
};

然后将其连接到每个div：

---

让我知道，如果我的ans也不起作用。现在，它必须起作用。你为什么不使用？你确定你想在imageHolder内的div上悬停吗？问题是所有这些对硬编码的div起作用，但对生成的angularjs不起作用divs@Legendary：无论如何都是一样的，使用.on event，Abhinav您是否在控制台中看到任何jquery错误，这些错误可能会破坏脚本？另外，请尝试在readyNow文档中包含此代码，您只需重复一下，我也尝试了更新后的答案。还是不行。这些代码对硬编码的div很有效，但对angularjs div不起作用。Chaitanya Gadkari，控制台中没有任何错误。你所说的文档准备是什么意思？我把这个写进了angularjs的部分！所有这些都适用于硬编码div，不适用于angularjs divsChaitanya Gadkari，尝试了更新的答案，仍然不适用于angularjs div。传奇，你还想看什么？我发送了html div和jquery函数。仍然不起作用。完全相同的情况，适用于硬编码div，但不适用于angularjs div。如何检查它们在DOM中是否可用？当我检查元素时，我可以看到那些div，但在view source中看不到，显然这是一个angularjs应用程序，部分html将不可见。html代码中的“我的指令”和指令中的“我的指令”不应该是完全相同的文本吗？不，AngularJS将使用mydirective属性来查找现有的指令：通常不需要jquery。我建议不要在有角度的问题上加标签

angular.module('myModule', [])
.controller('myController', ['$scope', function($scope) {
  //controller code
}])
.directive('myDirective', function() {

  function link(scope, element, attrs) {
    $(element).on('hover', function(){
        console.log('inside hover function');
    });
  }

  return {
    link: link
  };
});

$scope.onHover = function(l) {
    console.log('inside hover function', l.link);
};

<div alt="{{l.link}}" style="background-color:white; 
      background-image:url({{l.link}}) ;
      background-repeat:no-repeat; background-size:contain;
      background-position:center; width:70px;height:85px;
      display:inline-block;border: 1px solid #C1C1C1; margin:8px;
      float-inherit"
      ng-repeat="l in imageLinks"
      ng-mouseenter="onHover(l)">
</div>