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，而你在开始时绑定(bind)了 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，以更有 Angular 的方式编写代码会更有意义。然后，您无需编写任何将处理 UI 本身的外部 Javascript 代码。

标记

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