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

<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');

};

实际上，Angular的方法是在你的img标签上使用ng-class，如下所示：

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

然后你的flip（）函数就像这样切换x.flipped：

$scope.flip = function(x) {

    x.flipped = !x.flipped;

};

使用jQuery在第二次单击时没有{{...}}触发时，Angular ng-click没有运行

1 个答案: