如何正确构建 AngularJS 标记的无线电输入指令？答案

【问题标题】：How do I properly build an AngularJS labeled radio input directive?如何正确构建 AngularJS 标记的无线电输入指令？
【发布时间】：2014-04-17 00:48:04
【问题描述】：

我意识到 AngularJS 已经有一个 input[radio] 指令，我想尽可能地利用它。

我创建了一个JSFiddle here，但我不知道如何让 ng-model 属性正常工作。我正在选择每个收音机，但 selectedValue 没有改变。

另外，请告诉我我在这里做错了什么。我确信我可以进行其他一些改进。

HTML：

<div data-ng-controller="controller">
    <div
      data-ng-repeat="radio in radios"
      data-ng-model="selectedValue"
      data-name="radio1"
      data-label="{{radio.label}}"
      data-value="{{radio.value}}"
      data-labeled-radio></div>
    <br>
    selected value: {{selectedValue}}
</div>

JavaScript：

angular.module('app', [])
.controller('controller', function($scope) {
    $scope.selectedValue = 'FOO';
    $scope.radios = [
        { label: 'foo', value: 'FOO' },
        { label: 'bar', value: 'BAR' }
    ];
})
.directive('labeledRadio', function(){
    return {
        require: ['ngModel', 'value'],
        restrict: 'A',
        replace: true,
        template: [
            '<label class="radio">',
            '  <input class="radio__input" type="radio" data-ng-model="ngModel" name="{{name}}" value="{{value}}">',
            '  <span class="radio__label">{{label}}</span>',
            '</label>'
        ].join(''),
        scope: {
            ngModel: '=',
            label: '@',
            name: '@',
            value: '@'
        }
    }
});

【问题讨论】：

标签： angularjs angularjs-directive angularjs-ng-repeat

【解决方案1】：

由于原型继承在 JavaScript 中的工作方式，您不能在 2-way 数据绑定的范围内使用原语。因此解决此问题的方法是将selectedValue 更改为对象...

angular.module('app', [])
.controller('controller', function($scope) {
    $scope.selectedValue = { value: 'FOO' };
    $scope.radios = [
        { label: 'foo', value: 'FOO' },
        { label: 'bar', value: 'BAR' }
    ];
})

<div data-ng-controller="controller">
    <div
      data-ng-repeat="radio in radios"
      data-ng-model="selectedValue.value"
      data-name="radio1"
      data-label="{{radio.label}}"
      data-value="{{radio.value}}"
      data-labeled-radio></div>
    <br>
    selected value: {{selectedValue.value}}
</div>

小提琴：http://jsfiddle.net/gdnKW/

完整的解释请看这里：https://github.com/angular/angular.js/wiki/Understanding-Scopes

【讨论】：