JavaScript 无法找到 angularjs 生成的 div

Question

这是我 angularjs 生成的 ng-repeat，用于在滑块中加载图像。然后我使用 java 脚本获取 imageHolder 下的 div。 java 脚本如下所示。问题是 java 脚本找不到 angularjs 生成的 div，但是如果我在那里硬编码 div，那么 java 脚本会找到它. 任何解决方案？

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

JavaScript 得到 div:

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

'inside hover function' 为硬编码 div 打印，但不为 angularjs 生成的 div 打印。

Answer 1

由于 div 是稍后生成的，.hover() 无法识别它们，使用 .on() jquery 事件作为

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

Answer 2

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

我认为这可能是问题所在。

Answer 3

而不是

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

你应该做

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

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

Answer 4

尝试使用指令和属性 div : AngularJS Directive docs here，link 函数在编译 html 之后被调用，所以你的 ng-将应用重复

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

//app.js

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

Answer 5

您应该使用 angular 指令将行为附加到元素。对于悬停，angular 有 ng-mouseenter.

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

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

然后将此附加到每个 div:

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

JavaScript 无法找到 angularjs 生成的 div

JavaScript not able to find angularjs generated divs

javascript

jquery

angularjs

angularjs-ng-repeat