單選按鈕，指令不具約束力的ngModel

Question

我試圖創建一個通用的單選按鈕指令，它會採取選擇從控制器顯示：

<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創建的新範圍。

如何解決這個問題？

的plunker鏈接：http://plnkr.co/edit/myS5hXwxjoDEqQI2q5Q7?p=preview

Answer 1

在您的模板試試這個：

ng-model="$parent.ngModel" 

DEMO

你是正確的，ng-repeat創建子作用域。你實際上是綁定到子範圍的屬性。