将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>