我正在尝试制作其中一种内存游戏，您需要将 2 张卡片翻过来并尝试匹配另一面的图像，否则它们都会翻过来。
我的代码工作正常，除了我需要在 2 张卡片没有匹配时翻转回来之前添加延迟/暂停。我正在尝试使用 $timeout，但出现错误: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>
我的控制
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
}
}
}
}
}
};
}]);
我现在将尝试在 JSFiddle 中重新生成
最佳答案
到循环结束时，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);
与:
$scope.unflipCardsTimeout(k, i);
关于javascript - AngularJS 使用 $timeout 给出未定义的错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31070839/