Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angularjs/24.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/clojure/3.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
将ngModel绑定到具有隔离作用域的AngularJS指令_Angularjs_Angularjs Directive_Angularjs Scope - Fatal编程技术网

将ngModel绑定到具有隔离作用域的AngularJS指令

将ngModel绑定到具有隔离作用域的AngularJS指令,angularjs,angularjs-directive,angularjs-scope,Angularjs,Angularjs Directive,Angularjs Scope,我正试图构建一个角度指令来呈现无线电输入和相关标签。该指令的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="ge

我正试图构建一个角度指令来呈现无线电输入和相关标签。该指令的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;
        }
    };
});
app.directive('dRadio',function(){
返回{
限制:'E',
范围:正确,
模板:“{label}}”,
链接:函数(范围、元素、属性){
scope.name=attrs.name;
scope.value=attrs.value;
scope.label=attrs.label;
}
};
});
我的指令中唯一缺少的是ng模型部分。因为每个指令都创建一个独立的作用域,所以我不确定如何将模型绑定到它

这里有一个类似的堆栈溢出问题:


我尝试了这个解决方案,但没能成功。有什么想法吗?谢谢

如果希望具有双向绑定,则需要在范围中添加一个
模型:'='
。这将允许您在您的范围内拥有一个模型变量,该变量将与您在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;
        }
    };
});
app.directive('dRadio',function(){
返回{
限制:'E',
作用域:{model:'='},
模板:“{label}}”,
链接:函数(范围、元素、属性){
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>


这是一个正在工作的@wick26真棒!谢谢很好!妙极了!一旦我有了15个声望点,我就会投这个票。