单选按钮指令未绑定 ngModel

Question

我正在尝试创建一个通用的 radioButton 指令，它将从控制器中获取选项进行显示：

<cs-radio-field options="gender" ng-model="genderValue"></cs-radio-field>

选项会是这样的

$scope.gender = { label: "Gender", required:true,  valueList: [{ text: "Male", value: "yes" },{text:"Female", value:"no"}] };

指令定义为：

app.directive("csRadioField", function () {
    var templateHtml = function () {
        return '<div ng-form="myform">' +
                '<div class="control-group" class="{{options.class}}">' +
                    '<div class="control-label">{{options.label || "Radio"}} {{ options.required ? "*" : ""}} </div>' +
                    '<div class="controls">' +
                        '<div class="radio" ng-repeat="(key, option) in options.valueList">' +
                            '<label> <input type="radio" name="myfield" ng-value="option.value" ng-model="ngModel" ng-required="options.required" />{{option.text}} </label>' +
                        '</div>' +
                        '<div class="field-validation-error" data-ng-show="myform.myfield.$invalid && myform.myfield.$dirty"> ' +
                            '<div data-ng-show="myform.myfield.$error.required">{{options.label}} is required!!!</div>' +
                        '</div>' +
                    '</div>' +
                '</div>' +
            '</div>';
    };

    return {
        scope: { options: '=', ngModel: '=' },
        required: ['ngModel', '^form'],
        restrict: 'E',
        template: templateHtml,
    };
});

但是 ngModel 在父作用域中没有绑定。主要是因为 ng-repeat 创建了新作用域。

如何解决这个问题？

插件链接：http://plnkr.co/edit/myS5hXwxjoDEqQI2q5Q7?p=preview

Answer 1

在你的模板中试试这个：

ng-model="$parent.ngModel"

DEMO

ng-repeat 创建子作用域 是正确的。您实际上是绑定到子作用域的属性。