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; 

};