Question

Im trying to make one of these memorization games, where u need to flip 2 cards over and try to match the images on the other side otherwise they both turn back over.

My code is working fine, except that I need to add a delay/pause before the 2 cards get flipped back over if no match is made. I'm trying to use $timeout, but i'm getting an error: TypeError: Cannot set property 'isFlipped' of undefined

HTML

<body ng-controller="MainCtrl as main">
<figure ng-class="{true: 'flipped', false: 'not-flipped'}[card.isFlipped]" class="card" 
        ng-repeat="card in cards" ng-click="flipCard(card.id, card.pair)">
  <img ng-src="img/cardback1.png" class="back"></img>
  <img ng-src="{{card.img}}" class="front"></img>
</figure>
</body>

MyCtrl

angular.module('CardApp').controller('MainCtrl', ['$scope', '$timeout', function($scope, $timeout) {

  $scope.cards = [
    {
      img: 'img/chantal1.jpg',
      id: 1,
      isFlipped: false,
      pair: 1,
      matched: false,
    },
    {
      img: 'img/chantal1.jpg',
      id: 2,
      isFlipped: false,
      pair: 1,
      matched: false,
    },
    {
      img: 'img/chantal2.jpg',
      id: 3,
      isFlipped: false,
      pair: 2,
      matched: false,
    },
    {
      img: 'img/chantal2.jpg',
      id: 4,
      isFlipped: false,
      pair: 2,
      matched: false,
    },
    {
      img: 'img/chantal3.jpg',
      id: 5,
      isFlipped: false,
      pair: 3,
      matched: false,
    },
    {
      img: 'img/chantal3.jpg',
      id: 6,
      isFlipped: false,
      pair: 3,
      matched: false,
    },

    ];

  $scope.unflipCards = function(k, i) {
    $scope.cards[k].isFlipped = false;
    $scope.cards[i].isFlipped = false;
  };

  $scope.flipCard = function(id, pair) {

    var cards = $scope.cards;

    for(var i = 0, j = cards.length; i < j; i++) {
      // find card id in cards that is not matched
      if(cards[i].id == id && cards[i].matched == false) {
        // flip card
        cards[i].isFlipped = !cards[i].isFlipped;
        // check if any other cards are flipped
        for(var k = 0, j; k < j; k++) {
          // if we find another card that is flipped and is not yet matched
          if(cards[k].isFlipped == true && cards[k].matched == false && cards[k].id != id) {
            // check if this card is a pair with the current card
            if(cards[k].pair == pair) {
              // set matched to true
              cards[k].matched = true;
              cards[i].matched = true;
            } else {
              $timeout(function(){$scope.unflipCards(k, i)}, 1000); // undefined error
              //$scope.unflipCards(k, i); // works
            }
          }
        }
      }
    }

  };



}]);

I will try to reproduct in JSFiddle now

Answer 1

在周期结束时，nc -U /tmp/echo.sock和k已经超过最后一张卡片索引。因此i和$scope.cards[k]都不存在，因此未定义。

你可以这样做：

$scope.cards[i]

并在你的循环中替换：

$scope.unflipCardsTimeout = function(k, i) {
    $timeout(function(){$scope.unflipCards(k, i)}, 1000);
};

使用：

$timeout(function(){$scope.unflipCards(k, i)}, 1000);

Answer 2

错误的发生是因为k＆amp;我是未定义的。您可以通过更新

中的代码来获得所需的结果

$timeout(function(){$scope.unflipCards(k, i)}, 1000);

到

$timeout(function(){var x=k;var y=i;$scope.unflipCards(x, y)}, 1000);

供参考 - http://plnkr.co/edit/o1namfsvFZbWlffmQsvd?p=preview

Answer 3

虽然我不知道$timeout无法正常工作的原因，但我建议通过传递卡片对象而不是其属性来简化整个代码。

ng-click='flipCard(card)'

$scope.flipCard = function(card) {
    if (card.matched) return;
    card.isFlipped = true;

    var cards = $scope.cards;
    for (var i=0; i<cards.length; i++) {
         var card2 = cards[i];

         // skip if it is self
         if (card2 == card) continue;

         // check if any other cards are flipped
         if (card2.isFlipped) {
             if (card.pair == card2.pair) {
                 card.matched = card2.matched = true;
             }
             else {
                 $timeout(function(){
                     card.isFlipped = card2.isFlipped = false;
                 }, 1000);
             }

             break;
         }
    }
}

Answer 4

此处$timeout在for loop完成后执行，因为timeout函数将在下一个摘要周期中调用。所以此时没有k和i存在，因此它们是undefined。

AngularJS Using $timeout giving undefined error

4 个答案: