在AngularJS中，使用ng-repeat，为什么$scope变量会在子级之间发生冲突？

Question

我有一个对象表示有两个孩子的“讨论”或“辩论”--每个孩子都是代表辩论中“争论”的子对象的集合。一个孩子是“肯定”争论的集合，另一个是“否定”争论的集合。

我使用的是这样的东西：

<div ng-controller="contentionGroupCtrl" ng-repeat="(contentionType, contentionGroup) in debate.contentions_sorted" class="contention {[{contentionType}]}-section">
  <a class="button contention-new" ng-click="toggleEditForm()">+ Add New Contention</a>
  <div class="contention-new" ng-show="editing">
    <form ng-submit="formContentionSubmit()" class="ng-scope ng-pristine ng-invalid ng-invalid-required">
      <input type="text" id="contention_name" name="contention[name]" required="required" ng-model="edit.name" placeholder="New Contention" class="ng-pristine ng-invalid ng-invalid-required">
      <div>
        <input type="radio" id="contention_aff_0" name="contention[aff]" required="required" ng-model="edit.aff" value="1">
        <label for="contention_aff_0" class="required">Affirmative</label>
        <input type="radio" id="contention_aff_1" name="contention[aff]" required="required" ng-model="edit.aff" value="0">
        <label for="contention_aff_1" class="required">Negative</label>
      </div>
      <input type="button" ng-click="toggleEditForm()" value="Cancel">
      <input type="submit" value="Save">
    </form>
  </div>
  <div ng-controller="contentionCtrl" ng-repeat="contention in contentionGroup" class="contention" id="contention-{[{ contention.id }]}">
    EACH CONTENTION CONTENT STUFF HERE
  </div>
</div>

这将显示两组争用，并且每组争用的顶部都有一个“添加新争用”表单。该表单基于toggleEditForm()方法进行切换。我对“新争用”和“编辑争用”使用了相同的表单模板，因此该表单有一个模型(单选按钮)来表示争用是“肯定”争用还是“否定”争用。

控制器"contentionGroupCtrl“用于争议组，它的toggleEditForm方法如下所示：

// Toggle New Contention Form
  $scope.toggleEditForm = function() {
    var ct;
    $scope.editing = !$scope.editing; // First display or hide the form
    if ($scope.editing == true) {  // If displaying the form, initialize 
      if ($scope.contentionType == 'aff') {
        ct = 1; // 'aff' equates to 1 in the model
      }
      else {
        ct = 0;
      }
      $scope.edit.aff = ct; // Sets the radio button appropriately

      // We are now editing
      $scope.edit.name = ''; // Blanks out the contention "Name" field for creating a new contention
    }
  };

一切都很好，除了:假设您打开了"Affirmative"-side "Add New Contention“表单。它将显示一个空白名称，并选中单选按钮"Affirmative“。如果您随后单击“否定”名称“添加新争用”按钮，将出现相应的表单，但两个“-side”字段都将被清除，并且在这两个字段中的“否定”的单选按钮将被选中。

$scope在每一端都应该是不同的，不是吗？每种形式都使用自己的$scope.edit模型；为什么修改否定争用方的"edit.name“和"edit.aff”模型会影响肯定方的模型？

Answer 1

根据我提出这个问题后所学到的知识，以及从Mark Rajcok的建议中学到的，这个问题的主旨是我正在嵌套Scopes，而这不是最佳实践。

在我的例子中，我所依赖的其他$scope变量需要在子范围内初始化，否则它们将从父范围继承。这完全是我想要的，但它最终在我的实现中变得混乱，我错过了修复它。

然而，最重要的是:尽量不要嵌套作用域！相反，使用自定义服务来处理控制器之间的数据接口。