javascript - 未找到 Angular JS 对象

Question

我在 Angular 中有一个对象，正在我正在使用的库中使用。当我编写一个新函数时，我无法传递同一个对象。我不知道为什么。

该对象称为person。它直接绑定(bind)在 HTML 中。该对象仅返回下面的 cardsCollection 数组中的 2 个项目。

我正在尝试编写的函数称为 clickLike。我真的只是希望无论有人点击还是向右滑动都会发生同样的事情。您可以在此处查看开发站点: http://430designs.com/xperience/black-label-app/deck.php

这是整个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',
      }, {
          thumbnail: 'images/deck/thor_03.jpg',
          collection: 'thoroughbred',
      }, {
          thumbnail: 'images/deck/thor_04.jpg',
          collection: 'thoroughbred',
      }, {
          thumbnail: 'images/deck/thor_05.jpg',
          collection: 'thoroughbred',
      }, {
          thumbnail: 'images/deck/thor_06.jpg',
          collection: 'thoroughbred',
      }, {
          thumbnail: 'images/deck/rhap_01.jpg',
          collection: 'rhapsody',
      }, {
          thumbnail: 'images/deck/rhap_02.jpg',
          collection: 'rhapsody',
      }, {
          thumbnail: 'images/deck/rhap_03.jpg',
          collection: 'rhapsody',
      }, {
          thumbnail: 'images/deck/rhap_04.jpg',
          collection: 'rhapsody',
      }, {
          thumbnail: 'images/deck/rhap_05.jpg',
          collection: 'rhapsody',
      }, {
          thumbnail: 'images/deck/rhap_06.jpg',
          collection: 'rhapsody',
      }, {
          thumbnail: 'images/deck/cha_01.jpg',
          collection: 'chalet',
      }, {
          thumbnail: 'images/deck/cha_02.jpg',
          collection: 'chalet',
      }, {
          thumbnail: 'images/deck/cha_03.jpg',
          collection: 'chalet',
      }, {
          thumbnail: 'images/deck/cha_04.jpg',
          collection: 'chalet',
      }, {
          thumbnail: 'images/deck/cha_05.jpg',
          collection: 'chalet',
      }, {
          thumbnail: 'images/deck/cha_06.jpg',
          collection: 'chalet',
      }, {
          thumbnail: 'images/deck/mod_01.jpg',
          collection: 'modern',
      }, {
          thumbnail: 'images/deck/mod_02.jpg',
          collection: 'modern',
      }, {
          thumbnail: 'images/deck/mod_03.jpg',
          collection: 'modern',
      }, {
          thumbnail: 'images/deck/mod_04.jpg',
          collection: 'modern',
      }, {
          thumbnail: 'images/deck/mod_05.jpg',
          collection: 'modern',
      }, {
          thumbnail: 'images/deck/mod_06.jpg',
          collection: 'modern',
      }, {
          thumbnail: 'images/deck/ind_01.jpg',
          collection: 'indulgence',
      }, {
          thumbnail: 'images/deck/ind_02.jpg',
          collection: 'indulgence',
      }, {
          thumbnail: 'images/deck/ind_03.jpg',
          collection: 'indulgence',
      }, {
          thumbnail: 'images/deck/ind_04.jpg',
          collection: 'indulgence',
      }, {
          thumbnail: 'images/deck/ind_05.jpg',
          collection: 'indulgence',
      }, {
          thumbnail: 'images/deck/ind_06.jpg',
          collection: 'indulgence',
      }, {
          thumbnail: 'images/deck/cnt_01.jpg',
          collection: 'center-stage',
      }, {
          thumbnail: 'images/deck/cnt_02.jpg',
          collection: 'center-stage',
      }, {
          thumbnail: 'images/deck/cnt_03.jpg',
          collection: 'center-stage',
      }, {
          thumbnail: 'images/deck/cnt_04.jpg',
          collection: 'center-stage',
      }, {
          thumbnail: 'images/deck/cnt_05.jpg',
          collection: 'center-stage',
      }, {
          thumbnail: 'images/deck/cnt_06.jpg',
          collection: 'center-stage',
      }, {
          thumbnail: 'images/deck/vin_01.jpg',
          collection: 'vineyard',
      }, {
          thumbnail: 'images/deck/vin_02.jpg',
          collection: 'vineyard',
      }, {
          thumbnail: 'images/deck/vin_03.jpg',
          collection: 'vineyard',
      }, {
          thumbnail: 'images/deck/vin_04.jpg',
          collection: 'vineyard',
      }, {
          thumbnail: 'images/deck/vin_05.jpg',
          collection: 'vineyard',
      }, {
          thumbnail: 'images/deck/vin_06.jpg',
          collection: 'vineyard',
      }, 
    ];

    // 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() {
      $timeout(function() {
        $scope.clickedTimes = $scope.clickedTimes + 1;
        $scope.actions.unshift({ name: 'Click on item' });
      });
    };

    $scope.count = 0;
    $scope.showinfo = false;
    $scope.clickedTimes = 0;
    $scope.actions = [];
    $scope.picks = [];
    var counterRight = 0;
    var counterLeft = 0;

    $scope.swipeend = function() {
        $scope.actions.unshift({ name: 'Collection Empty' });
        $window.location.href = 'theme-default.html';
    }; //endswipeend

    $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++;
        });
    }; //end swipeLeft

    $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

    $scope.clickLike = function() {
      $scope.swipeRight();
    }; //clickLike
});

牌组的 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="$parent.$parent.clickDisike()"></div>
    <div class="icon-like" ng-click="$parent.$parent.clickLike()"></div>
    <div class="clearfix"></div>
  </div>
</div><!-- end person-->
<div class="clearfix"></div>

如果我遗漏了任何内容，请告诉我。

先谢谢大家了!

Answer 1

我不明白你是如何获得peopleToShow的:

ng-repeat="person in peopleToShow"

您可能想将其替换为:

ng-repeat="person in cardsCollection"

因为 $scope.cardsCollection 似乎是您存储缩略图的位置。