Question

这是我的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的JavaScript：

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

＆＃39;内部悬停功能＆＃39;为硬编码的div打印，但不为angularjs生成的div打印。

Answer 1

由于div后来生成，.hover（）不识别那些，使用.on（）jquery事件作为

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

Answer 2

当你进行绑定时，你确定这些div在Dom中可用吗？

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

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

尝试使用Directive和属性div：AngularJS Directive docs here，在编译html后调用链接函数，因此将应用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>

// 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指令将行为附加到元素。对于悬停，角度为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

5 个答案: