Question

我的控制器中有一个名为won的变量可以打开和关闭，但ng-show不会动态隐藏/显示元素。为什么？它似乎在我最初设置won = false/true时起作用，但在应用程序运行时却没有。

<div class='container' ng-controller='CardsCtrl'>
  <div class='win' ng-show='won'>
    <img ng-src='images/win.gif'>
  </div>
  <div ng-show='!won' ng-repeat='card in cards' ng-click='card.flipped || changeState(card)'
      ng-class="{'card' : !card.flipped, 'card flipped': card.flipped}">
    <img ng-src='{{card.back}}' class='back side'>
    <div class='face side'>
      <img ng-src='{{card.logo}}' class='logo'>
    </div>
  </div>

</div>

var memoryApp = angular.module('memoryApp', []);

memoryApp.controller('CardsCtrl', function ($scope, $timeout){
  var won = $scope.won = false;
  var cards = $scope.cards = [];
  var current_cards = [];
  var checkingCards = $scope.checkingCards = false;


  var logos = _.shuffle([0,0,1,1,2,2,3,3,4,4,5,5]);
  for (var i = 0; i < 12; i++){
    new_card = new Card(logos[i]);
    // $interval(new_card.oscillate, 2000);
    cards.push(new_card);

  }
  cards = _.shuffle(cards);


  $scope.changeState = function (card) {
    won = !won;
    console.log(won);
    // if (checkingCards){
    //   return;
    // }
    // card.flip();
    // current_cards.push(card);
    // if (current_cards.length === 2){
    //   checkingCards = true;
    //   $timeout(compareCards, 1500);
    // }
  }

  function compareCards(){
      if (!current_cards[0].compare(current_cards[1])){
        current_cards[0].flip();
        current_cards[1].flip();
      }

      if (checkWon()){
        won = true;
      }
      current_cards = [];
      checkingCards = false;
      console.log(won);
  }

  function checkWon(){
    for (var i = 0; i < cards.length; i++){
      if (cards[i].flipped === false){
        return false;
      }
    }
    return true;
  }

});

Answer 1

问题是您总是更改局部变量won而不是angularjs使用的won的{{1}}属性。

所以不要使用$scope

won = true;

在javascript中，变量不像指针一样工作，所以当你说$scope.won = true;时，你有2个属性var won = $scope.won = false;而won引用$scope.won，那么稍后当你说{{}时1}} false的值更改为won = true，但won仍然引用问题的true。因此，不需要在控制器中使用局部变量$scope.won，因为它是一个原始值，总是处理范围属性。

演示：Problem，Solution

Ng-show不是动态添加元素

1 个答案: