我正在尝试构建一个 Angular 指令来呈现 radio 输入和相关标签。该指令的 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 部分。由于每个指令都会创建一个独立的作用域,因此我不确定如何将模型绑定(bind)到它。
这里有一个类似的 Stack Overflow 问题: Isolating directive scope but preserve binding on ngModel
我试过这个解决方案,但我无法让它工作。有任何想法吗?谢谢!
最佳答案
如果您想要双向绑定(bind),您需要将 model: '='
添加到您的范围。这将允许您在范围内拥有一个模型变量,该变量将与您在 html 中指定的变量绑定(bind)
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>
关于angularjs - 将 ngModel 绑定(bind)到具有隔离范围的 AngularJS 指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25585634/