我正在尝试构建一个呈现无线电输入和相关标签的Angular指令。对于该指令的HTML看起来像这样:将ngModel绑定到AngularJS指令与隔离范围
<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
我试过这个解决方案,但我无法得到它的工作。有任何想法吗?谢谢!
这里表示是工作[plunker](HTTP ://plnkr.co/edit/586COA8rCl0hlqcS47G1?p =预览) – 2014-08-30 19:03:01
@ wickY26太棒了!谢谢! – Rodney 2014-08-30 19:58:48