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

首先，您应该在视图之外移动实现细节（即，您不应该在视图中直接设置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;
}

Answer 2

如果我理解您的问题，请尝试将attack属性放在对象中。这是因为当您在attack = power.attck内执行ng-repeat时，您正在ng-repeat创建的子范围上创建新属性，而不是更改父级attack的值范围。

在您的控制器中：

$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 3

尝试加入父级，它应该可以正常工作

在ng-click上像这样：

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

角度变量不更新外部循环

3 个答案: