jQuery函数不使用ng repeat

我正在使用

ng repeat

重复一些显示记录列表的

div

问题：我想做的是，当用户点击记录时，弹出窗口应该打开

ng repeat

工作正常，但问题是jQuery click事件不适用于

ng repeat

中的元素

HTML代码：

<div data-ng-controller="AlbumCtrl">
  <div data-ng-repeat="z in songInfo">
    <div data-ng-repeat="b in z.tracks">
      <div class="border-bottom clearfix">
        <ul class="social-icon">
          <li class="share-popup"><a class="share-song-icon"></a>
            <ul class="popup">
              <li><a class="share-facebook">Facebook</a></li>
              <li class="last"><a class="save">Twitter</a></li>
              <div class="cancel"><a>Cancel</a></div>
            </ul>
          </li> 
        </ul>
      </div>
    </div>
  </div>
</div>

jQuery

当我将div放在

ng repeat

之外时，单击事件正常工作

---

任何帮助都是非常值得的。谢谢。

问题是您正在绘制模板之前绑定事件

这是每个从事angular项目的人都面临的一个常见问题。您应该使用ng-click，或者如果您想使用jQuery-click，请使用更新代码

$('.share-popup').on("click", function(e)
    {  
            e.stopPropagation();
        $(this).children().toggleClass('active');
        });

---

问题是

ng repeat

动态地呈现所有div，并且您在开始时绑定jQuery事件，当时

share popup

类元素没有呈现在DOM上，这就是为什么这些事件没有附加到该元素上。您需要编写自己的自定义指令来限制类&当类元素在DOM上呈现时，此指令

link

函数将被激发，事件将被附加

指令

app.directive('sharePopup', function(){
    return{
       restrict: 'C',
       link: function(scope, element, attrs){
          element.on('click', function(e){
              e.stopPropagation();
              element.children().toggleClass('active');
          })
       }
    }
})

更好的解决方案是在元素内部使用

ng类

，通过以更具角度的方式编写代码会更有意义。然后，您不需要编写任何外部Javascript代码来处理UI本身

标记

脸谱网
推特
取消

当我们使用ng repeat并需要触发jquery click事件时，请尝试一下这个方法，它对我很有效

$(document).on("click", ".className", function() {

//your code here...

});

---

非常棒的描述..我希望在应用程序中实现它时，它会起作用。谢谢相信这两种方法都会起作用..第二种方法更合适..第一种方法也很酷..是的..两种方法都很有用..一旦对我起作用..我会标记你的答案。@RohitJindal cool..很高兴帮助你..谢谢：）定制指令

sharePopup

我必须制作

ng模型

，以便将该指令与其绑定，否则它将适用于类，如我的html代码所示？

$(document).on("click", ".className", function() {

//your code here...

});