javascript - 将对象绑定(bind)到单选按钮组时缺少功能和错误

Question

这个问题已经有答案了:

What are the nuances of scope prototypal / prototypical inheritance in AngularJS? (3 个回答)

已关闭 5 年前。

我正在尝试将对象绑定(bind)到单选按钮组。请引用这篇文章中的两个代码片段。第一个使用 ng-repeat 进行循环，但失败了。我手动重复第二个示例中的元素，但它有效。为什么 ng-repeat 会导致这个问题？

示例 1

  angular
      .module('listParser', [])
      .factory('Item', function() {
        return function(id, name) {
          this.id = id;
          this.name = name;
        }
      })
      .controller('default', ['$scope', 'Item', function($scope, Item) {
        var collection = [];
        collection.push(new Item(0, 'Alpha'));
        collection.push(new Item(1, 'Beta'));
        
        $scope.collection = collection;
        $scope.lucky = collection[0];
      }]);

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <div ng-app="listParser" ng-controller="default">
   <div class="radio-group">
    <ul><li ng-repeat="item in collection"><input type="radio" name="group" ng-value="item" ng-model="lucky"/></li></ul>
   </div>
   <div class="description">
    {{lucky.name}}
   </div>
  </div>

示例 2

  angular
        .module('listParser', [])
        .factory('Item', function() {
          return function(id, name) {
            this.id = id;
            this.name = name;
          }
        })
        .controller('default', ['$scope', 'Item', function($scope, Item) {
          var collection = [];
          collection.push(new Item(0, 'Alpha'));
          collection.push(new Item(1, 'Beta'));
          
          $scope.collection = collection;
          $scope.lucky = collection[0];
        }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="listParser" ng-controller="default">
      <div class="radio-group">
      <ul>
        <li><input type="radio" name="group" ng-value="collection[0]" ng-model="lucky"/></li>
        <li><input type="radio" name="group" ng-value="collection[1]" ng-model="lucky"/></li>
      </ul>
      </div>
      <div class="description">
      {{lucky.name}}
      </div>
    </div>

Answer 1

它不适用于 ng-repeat ，因为ng-repeat确实创建了一个原型(prototype)继承的子作用域。这意味着，它创建了一个 lucky scope内的属性上ng-repeat元素，即lucky范围变量在 ng-repeat 之外不可用元素。您可以强制使用$parent lucky 之前的前缀变量，最终会帮助您指向 lucky到父范围。但不要在生产代码中这样做，这被认为是不好的做法。

在其他情况下这不是问题，因为所有范围都在同一个 context 上，在 ng-repeat 的情况下事实并非如此。

要从根本上解决此问题，您可以使用 Dot rule或controllerAs定义 ng-model 时的模式

这里是another thread关于 ng-repeat 解释了同样的事情