javascript - Angular 变量不更新外部循环

Question

所以我在使用 Angular 时遇到了一个奇怪的问题，我创建了一个原始的预定义对象来循环访问我正在开发的纸牌游戏的纸牌统计数据。

    $scope.attack = 500;
    $scope.defense = 500;

    $scope.cardPowers = [
    {
      name: "balanced",
      attack: 2500,
      defense: 1500,
      cost: 3
    },
    {
      name: "high-offense",
      attack: 2500,
      defense: 1000,
      cost: 5
    },
    {
      name: "base-offense",
      attack: 1800,
      defense: 1000,
      cost: 4
    }
  ];

这一切都在主 Controller 中，我的大部分功能都在其中运行。我正在遍历它们并创建按钮，人们可以在其中选择汽车的属性，如下所示:

<div id="preview" class="vertical-display card twenty-five building" ng-class="{'building': gotComics, 'editing' : editing}" ng-controller="Save">
{{attack}} : {{defense}}
<h3>Card Builder</h3>
<div class="card-functions">
  <ul>
    <li><a href="" ng-click="saveNewCard(cardName, cardDescription, 500, 500, 5, cardThumbnail, cardBackground, '1', cardType)">SAVE <i class="fa fa-floppy-o"></i></a></li>
    <li><a href="" ng-click="editing = true">EDIT <i class="fa fa-pencil-square-o"></i></a></li>
    <li><a href="" ng-click="editing = false" ng-show="editing">CLOSE <i class="fa fa-times"></i></a></li>
  </ul>
  <!-- <a href="" ng-click="saveImage()" class="button small saveImage"><i class="fa fa-file-image-o"></i> Save as Image</a> -->
</div>
<div ng-show="editing" class="options">
  <h4>Choose Power</h4>
  <p ng-repeat="power in cardPowers"><a href="" ng-click="attack=power.attack">{{power.name | uppercase}}       {{attack}}</a></p>

  <h4>Thumbnail Positioning</h4>

  <!-- repeat card positioning -->  
</div>

<div ng-show="gotComics">
  <?php include('flip-container-code.php'); ?>
</div>

大多数情况下一切正常，但是，当我点击我的按钮来设置新的攻击时，它只会更新循环内的 {{attack}}，而不是循环外。请观看此截屏视频以了解我在说什么:http://screencast.com/t/0ZukLLYqtUYM

不确定为什么会这样，做了一些研究，似乎我这样做没问题，所以很奇怪。注意:其他的其实都很好，我的卡保存功能，查看默认攻击和防御值，模型等。

Answer 1

首先，您应该将实现细节移到 View 之外(即，您不应该直接在 View 中设置 model.attack = power.attack，应该是 至少更深一层，在 Controller 中)。这样，将其移至 Controller 即可自行解决您的问题。

您的 View 可能如下所示:

<p ng-repeat="power in cardPowers">
  <a href="" ng-click="setAttackPower(power)">
    {{power.name | uppercase}} {{attack}}
  </a>
</p>

在你的 Controller 中:

$scope.setAttackPower = function(power) {
  $scope.attack = power.attack;
}