將ngModel綁定到AngularJS指令與隔離範圍

Question

我正在嘗試構建一個呈現無線電輸入和相關標籤的Angular指令。對於該指令的HTML看起來像這樣：

<d-radio name="gender" value="male" label="I'm a male"></d-radio> 
<d-radio name="gender" value="female" label="I'm a female"></d-radio> 

我想這點使本等價的：

<input type="radio" name="gender" id="male" value="male" ng-model="gender"><label for="male">I'm a male</label> 
<input type="radio" name="gender" id="female" value="female" ng-model="gender"><label for="female">I'm a female</label> 

而這裏的JS代碼：

app.directive('dRadio', function() { 
    return { 
     restrict: 'E', 
     scope: true, 
     template: '<input type="radio" id="{{value}}" name="{{name}}" value="{{value}}"><label for="{{value}}">{{label}}</label>', 
     link: function(scope, element, attrs) { 
      scope.name = attrs.name; 
      scope.value = attrs.value; 
      scope.label = attrs.label; 
     } 
    }; 
}); 

唯一我的指令中缺少的是ng模型部分。由於每個指令都會創建一個獨立的作用域，因此我不確定如何將模型綁定到它。

有一個類似的堆棧溢出的問題在這裏： Isolating directive scope but preserve binding on ngModel

我試過這個解決方案，但我無法得到它的工作。有任何想法嗎？謝謝！

Answer 1

如果您想要雙向綁定，您需要將model: '='添加到您的範圍。這將允許你在你的範圍將與一個被綁定的模型變量，你在HTML

app.directive('dRadio', function() { 
    return { 
     restrict: 'E', 
     scope: { model: '=' }, 
     template: '<input type="radio" ng-model="{{model}}" id="{{value}}" name="{{name}}" value="{{value}}"> <label for="{{value}}">{{label}}</label>', 
     link: function(scope, element, attrs) { 
      scope.name = attrs.name; 
      scope.value = attrs.value; 
      scope.label = attrs.label; 
     } 
    }; 
}); 

而在你的HTML

<d-radio name="gender" value="male" label="I'm a male" model="gender"></d-radio>