我正在尝试构建一个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-model部分。由于每个指令都会创建一个隔离的作用域，因此我不确定如何将模型绑定到它。
这里有一个类似的堆栈溢出问题：隔离指令范围，但保留对ngModel的绑定
我尝试了此解决方案，但无法正常工作。有任何想法吗？谢谢！
如果要进行双向绑定，则需要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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句