我创建了一个带有单选按钮的AngularJS指令来控制我的页面将查询的环境并将其添加到我的页面。我使用双向绑定来映射一个名为的局部范围变量 environment
到具有相同名称的app变量。当我在模板中显式创建单选按钮时,它似乎运行良好(在我使用的实际代码中) 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>
这是工作版小提琴 以及我的指令代码的相关部分:
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);
};
}
和 这是仅适用一次的版本:
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来说是全新的,所以我完全有可能犯了一个非常基本的错误。谁能指出我正确的方向?
UPDATE 根据callmekatootie的建议,我改变了有问题的事件 ng-change
至 ng-click
,它每次都会发射。这将作为现在的解决办法,但我最初使用 ng-change
因为我没想到 ng-click
将适用于通过单击文本标签而不是输入本身而导致的更改,但事实上确实如此。仍然不明白为什么 ng-change
但是只会发射一次。