使用 ng-repeat 创建时，每个单选按钮的 ng-change 事件仅触发一次

Question

我创建了一个带有单选按钮的 AngularJS 指令来控制我的页面将查询哪个环境并将其添加到我的页面中。我正在使用双向绑定将名为environment 的局部范围变量映射到同名的应用程序变量。当我在模板中显式创建单选按钮时，它似乎运行良好（在我的实际代码中，我使用templateUrl，但仍然有同样的问题）。

<div>
    <label><input type="radio" name="env" ng-model="environment" ng-change="changeEnvironment(1)" value="1" />Testing</label>
    <label><input type="radio" name="env" ng-model="environment" ng-change="changeEnvironment(2)" value="2" />Production</label>
</div>

我可以根据需要多次选择每个选项，并且值会一直冒泡到应用程序的范围变量。

我想更改单选按钮的创建以在选择对象数组上使用ng-repeat。它创建选项，并捕获ngChange 事件，但每个选项只捕获一次。

<label ng-repeat="choice in choices">
    <input type="radio" name="env" ng-model="environment" ng-change="changeEnvironment(choice)" value="{{ choice.id }}" />{{ choice.name }}
</label>

Here is the working version fiddle 和我的指令代码的相关部分：

template: '<div>'
            + '<label><input type="radio" name="env" ng-model="environment" ng-change="changeEnvironment(1)" value="1" />Testing</label>'
            + '<label><input type="radio" name="env" ng-model="environment" ng-change="changeEnvironment(2)" value="2" />Production</label>'
            + '<div>Directive environment: {{ environment }}</div>'
            + '</div>',
link: function(scope, element, attributes) {

    scope.changeEnvironment = function(choiceID) {
        console.log('SELECTED environment ' + choiceID);
        scope.environment = choiceID;
        console.log('directive environment = ' + scope.environment);
    };

}

还有here is the version that only works once:

template: '<div><label ng-repeat="choice in choices">'
            + '<input type="radio" name="env" ng-model="environment" ng-change="changeEnvironment(choice)" value="{{ choice.id }}" />{{ choice.name }}'
            + '</label>'
            + '<div>Directive environment: {{ environment }}</div>'
            + '</div>',
link: function(scope, element, attributes) {
    scope.choices = [
        { id: 1, name: "Testing" },
        { id: 2, name: "Production" }
    ];

    scope.changeEnvironment = function(choice) {
        console.log('SELECTED environment ' + choice.id);
        scope.environment = choice.id;
        console.log('directive environment = ' + scope.environment);
    };

}

我是 AngularJS 的新手，所以我完全有可能犯了一个非常基本的错误。谁能指出我正确的方向？

更新 根据 callmekatootie 的建议，我将相关事件从 ng-change 更改为 ng-click，并且每次都会触发。现在可以解决此问题，但我最初使用ng-change，因为我认为ng-click 不会应用于由单击文本标签而不是输入本身引起的更改，但实际上确实如此。不过，仍然不明白为什么 ng-change 只触发一次。

Answer 1

问题的原因是ngRepeat 将为其子级创建新范围（以及原型继承如何影响范围）。

Angular wiki 对作用域继承的工作原理（以及常见的陷阱）有相当好的（和彻底的）解释。

This answer 到一个非常相似（本质上）的问题几乎可以解释这个问题。

在您的具体情况下，您可以引入一个对象（例如local）并将environment 分配为其属性）：

scope.local = {environment: scope.environment};
scope.changeEnvironment = function(choice) {
    scope.environment = choice.id;
};

然后你应该将你的模板绑定到那个“封装”的属性：

<input ... ng-model="local.environement" ... />

另请参阅此short demo。

---

更新

此答案旨在指出问题的根源。
绝对推荐使用不同的实现（如tasseKATT 或Leon 提出的实现）（并且更“Angularish”）。

Answer 2

使用对象而不是原始值：

app.controller('mainController', ['$scope', function (scope) {
  scope.environment = { value: '' };
}]);

删除ng-change 和$watch。 ng-model 就足够了（除非我误解了用例）。

演示： http://jsfiddle.net/GLAQ8/

关于原型继承的非常好的帖子可以在here找到。

Answer 3

您在 ng-change 事件中使用 environment 而不是 $parent.enviorement，该事件与重复范围相关联，而不是环境变量所在的 ng-repeat 父范围，

http://jsfiddle.net/cJ4Wb/7/

ng-model="$parent.enviroment"

请注意，在这种情况下，您甚至不需要事件来保持环境更新，模型中的任何更改都会反映在单选按钮中