Javascript 角度变量不更新外循环

所以我在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}}，而不更新循环外的。请看此屏幕广播以了解我所说的内容：

---

不知道为什么会这样，我做了一些研究，看起来我做得很好，所以很奇怪。注意：其他一切都正常工作，我的卡保存功能，查看默认攻击和防御值、模型等。

如果我正确理解您的问题，请尝试将

攻击

属性放入对象中。这是因为当您在

ng repeat

内部执行

attck=power.attck

时，您在由

ng repeat

创建的子作用域上创建了一个新属性，而不是在父作用域上更改

攻击的值

在控制器中：

$scope.model = {attack: 500};

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

以及您的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>


{{model.attack}}:{{defence}
制卡商





选择权力

缩略图定位

有关详细说明，请参阅。
尝试访问父级，它应该可以工作

如下图所示，单击：

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


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

您的视图可以如下所示：

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

甚至将
ng click
设置为
ng click=“setAttack（power）”
，只需在函数中设置
$scope.attack=power.attack
。这是在访问父控制器吗？我不知道这样的事情是可能的。除非我误会了。谢谢汤姆。这实际上是我在代码的其他地方做过的，但我没有意识到。这解决了我的问题。