javascript - 我的 ng-click 没有触发

Question

我是 Angular 新手，请耐心等待。

我正在构建一个应用程序，您可以在其中点击“X”或一颗心来表示不喜欢/喜欢某些东西。我正在使用一个名为 ng-swippy 的滑动库。

我尝试使用 ng-click="clickLike()" 作为“Like”按钮和 ng-click="clickDislike()"，但两者都没有正在开火。我不明白发生了什么事。

这是网址: http://430designs.com/xperience/black-label-app/deck.php

deck.php代码

<ng-swippy collection='deck' item-click='myCustomFunction' 
    data='showinfo' collection-empty='swipeend' swipe-left='swipeLeft' 
    swipe-right='swipeRight' cards-number='4' label-ok='Cool' 
    label-negative='Bad'>
</ng-swippy>

模板是从card-tpl.html调用的:

<div class="ng-swippy noselect">
<div person="person" swipe-directive="swipe-directive" ng-repeat="person in peopleToShow" class="content-wrapper swipable-card">
  <div class="card">
      <div style="background: url({{person.thumbnail}}) no-repeat 50% 15%" class="photo-item"></div>
      <div class="know-label">{{labelOk ? labelOk : "YES"}}</div>
      <div class="dontknow-label">{{labelNegative ? labelNegative : "NO"}}</div>
  </div>
  <div class="progress-stats" ng-if="data">
      <div class="card-shown">
          <div class="card-shown-text">{{person.collection}}</div>
          <div class="card-shown-number">{{person.subtitle}}</div>
      </div>
      <div class="card-number">{{collection.length - (collection.indexOf(person))}}/{{collection.length}}&nbsp;
      </div>
  </div>
  <div class="container like-dislike" >
    <div class="circle x" ng-click="clickDisike()"></div>
    <div class="icon-like" ng-click="clickLike()"></div>
    <div class="clearfix"></div>
  </div>
</div><!-- end person-->
<div class="clearfix"></div>

Controller .js

angular.module('black-label', ['ngTouch', 'ngSwippy'])
.controller('MainController', function($scope, $timeout, $window) {
    $scope.cardsCollection = [
      {
          thumbnail: 'images/deck/thor_01.jpg',
          collection: 'thoroughbred',
      }, {
          thumbnail: 'images/deck/thor_02.jpg',
          collection: 'thoroughbred',
      }, 
    ];

    // Do the shuffle
    var shuffleArray = function(array) {
        var m = array.length,
            t, i;
        // While there remain elements to shuffle
        while (m) {
            // Pick a remaining element
            i = Math.floor(Math.random() * m--);
            // And swap it with the current element.
            t = array[m];
            array[m] = array[i];
            array[i] = t;
        }
        return array;
    };
    $scope.deck = shuffleArray($scope.cardsCollection);

    $scope.myCustomFunction = function(person) {
      $timeout(function() {
        $scope.clickedTimes = $scope.clickedTimes + 1;
        $scope.actions.unshift({ name: 'Click on item' });
        $scope.swipeRight(person);
      });
    };

    $scope.clickLike = function(person) {
      console.log($scope.count);
      // swipeRight(person);
    };
    $scope.count = 0;
    $scope.showinfo = false;
    $scope.clickedTimes = 0;
    $scope.actions = [];
    $scope.picks = [];
    var counterRight = 0;
    var counterLeft = 0;
    var swipes = {};
    var picks = [];
    var counts = [];
    var $this = this;

    $scope.swipeend = function() {
        $scope.actions.unshift({ name: 'Collection Empty' });
        $window.location.href = 'theme-default.html';
    };
    $scope.swipeLeft = function(person) {
        //Essentially do nothing
        $scope.actions.unshift({ name: 'Left swipe' });
        $('.circle.x').addClass('dislike');
        $('.circle.x').removeClass('dislike');
        $(this).each(function() {
            return counterLeft++;
        });

    };
    $scope.swipeRight = function(person) {
        $scope.actions.unshift({ name: 'Right swipe' });

        // Count the number of right swipes
        $(this).each(function() {
            return counterRight++;
        });
        // Checking the circles
        $('.circle').each(function() {
            if (!$(this).hasClass('checked')) {
                $(this).addClass('checked');
                return false;
            }
        });

        $('.icon-like').addClass('liked');
        $('.icon-like').removeClass('liked');

        $scope.picks.push(person.collection);
        // console.log('Picks: ' + $scope.picks);
        // console.log("Counter: " + counterRight);
        if (counterRight === 4) {
            // Calculate and store the frequency of each swipe
            var frequency = $scope.picks.reduce(function(frequency, swipe) {
                var sofar = frequency[swipe];
                if (!sofar) {
                    frequency[swipe] = 1;
                } else {
                    frequency[swipe] = frequency[swipe] + 1;
                }
                return frequency;
            }, {});

            var max = Math.max.apply(null, Object.values(frequency)); // most frequent
            // find key for the most frequent value
            var winner = Object.keys(frequency).find(element => frequency[element] == max);
            $window.location.href = 'theme-' + winner + '.html';

        } //end 4 swipes
    }; //end swipeRight
});

非常感谢任何想法和帮助!

Answer 1

ng-click 指令位于具有隔离范围的指令内的 ng-repeat 指令内。要找到 clickLike() 函数，它需要向上两个父级:

<!-- 
<div class="icon-like" ng-click="clickLike()"></div>
-->
<div class="icon-like" ng-click="$parent.$parent.clickLike()"></div>

有关信息，请参阅AngularJS Wiki - Understanding Scopes .