使用隔离作用域将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>

以下是JavaScript代码：

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。由于每个指令都创建了一个隔离作用域，我不知道如何将模型绑定到它上面。

这里有一个类似的Stack Overflow问题： Isolating directive scope but preserve binding on ngModel

我尝试了这个解决方案，但无法使其正常工作。有任何想法吗？谢谢！

- Rodney

---

这里有一个可用的 plunker。 - Poyraz Yilmaz

@wickY26 太棒了！谢谢！ - Rodney

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>

- Adlen Afane

---

非常好！太棒了！我会在获得15个声望点后点赞。 - Rodney