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
    }
  ];

我的大部分功能都在主控制器中完成。我正在遍历它们并创建按钮，人们可以在其中选择汽车的属性，如下所示：

<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

如果我对你的问题理解正确，请尝试将 attack 属性放入对象中。这是因为当您在 ng-repeat 中执行 attack = power.attck 时，您是在 ng-repeat 创建的子作用域上创建一个新的属性而不是更改 [=12= 的值] 在父作用域上。

在您的控制器中：

$scope.model = {attack: 500};

还有你的html：

<div id="preview" class="vertical-display card twenty-five building" ng-class="{'building': gotComics, 'editing' : editing}" ng-controller="Save">
{{model.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="model.attack=power.attack">{{power.name | uppercase}}       {{model.attack}}</a></p>

  <h4>Thumbnail Positioning</h4>

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

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

有关详细说明，请参阅 here。

Answer 2

尝试访问父级，它应该可以工作

在 ng-click 上点赞：

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

Answer 3

首先，您应该将实现细节移到视图之外（即，您不应该直接在视图中设置 model.attack = power.attack，至少应该更深一层，在控制器中）。这样，将其移至控制器即可自行解决您的问题。

您的视图可能如下所示：

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

在你的控制器中：

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

Angular 变量不更新外循环

Angular variables not updating outside loop

javascript

loops

models

angularjs

angularjs-scope