jQuery函数不能与ng-repeat一起工作

Question

我使用ng-repeat来重复显示记录列表的div。

问题:我想做的是，当用户点击记录弹出应该打开。ng-repeat工作完美，但问题是，jQuery点击事件是不为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:

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

当我把div放在ng-repeat之外时，jQuery点击事件工作得很好。

Answer 1

问题是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-class，这将通过更有角度的方式编写代码更有意义。然后你不需要编写任何外部Javascript代码来处理UI本身。

标记

<div class="border-bottom clearfix">
  <ul class="social-icon">
    <li class="share-popup" ng-click="b.active!=b.active; $event.stopPropagation();">
      <a class="share-song-icon" ng-class="{active: b.active}"></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>

Answer 2

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

这是每个在angular工作的人都面临的一个常见问题。你应该使用ng-click或者如果你想使用jQuery，点击然后用

更新你的代码

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

Answer 3

当我们使用ng-repeat并需要触发一个jquery点击事件时，试试这个，它对我来说很有效。

$(document).on("click", ".className", function() {
//your code here...
});