Я создал директиву 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>
Вот скрипта рабочей версии и соответствующие части моего директивного кода:
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, поэтому вполне возможно, что я делаю очень основную ошибку. Может ли кто-нибудь указать мне в правильном направлении?
ОБНОВЛЕНИЕ. В соответствии с предложением callmekatootie я изменил рассматриваемое событие от ng-change до ng-click, и оно срабатывает каждый раз. На данный момент это будет работать, но я изначально использовал ng-change, потому что я не думал, что ng-click будет применяться к изменениям, вызванным щелчком по текстовой метке, а не самим входом, но на самом деле это так. По-прежнему не получается, почему ng-change срабатывает только один раз.
