Angular ng-click没有{{...}}用jQuery进行第二次点击时没有运行

Question

我在这里的代码在第二次点击时触发。

这被首先点击解雇，但在控制台中产生错误：

<img ng-click="{{flip()}}" class="img-b" src="{{x.face}}"> 

这段代码获得第二次点击射击没有任何错误：

<img ng-click=flip() class="img-b" src="{{x.face}}"> 

的javascript：

 $scope.flip = function() { 
      $('.img-b').on('click', function() { 
       $(this).addClass('img-f'); 
       $(this).removeClass('img-b'); 
      }); 
     }; 

Answer 1

问题是你是在第一次点击时设置jQuery事件侦听器，直到第二次点击才会运行。这种替换您的NG-点击：

<img ng-click="flip($event)" class="img-b" src="{{x.face}}"> 

然后更新您的翻转方法是这样的，它会工作：

$scope.flip = function(e) { 

    $(e.target).addClass('img-f'); 
    $(e.target).removeClass('img-b'); 

}; 

真的不过，角的方法是在使用纳克级你的img标签，像这样：

<img ng-click="flip(x)" ng-class="{'img-f': x.flipped, 'img-b': !x.flipped }" src="{{x.face}}"> 

然后你翻转（）函数将只需拨动x.flipped像这样：

$scope.flip = function(x) { 

    x.flipped = !x.flipped; 

};