如何在Angular的指令模板中設置ngModel？

Question

這是jsfiddle 。 HTML：

<div ng-app="app">
    <div ng-controller="ctrl">
        <div my-rd name="gender" value="male" model="gender"></div>
        <div my-rd name="gender" value="female" model="gender"></div>
        <p>Your choice is: {{gender}}</p>
    </div>
</div>

JS：

angular.module("app", [])
.directive("myRd", function(){
    return{
        restrict: "A",
        scope: {
            name: "@",
            value: "@",
            model: "="
        },
        template: "<input name='{{name}}' ng-model='model' value='{{value}}' checked type='radio' />{{value}}"
    }
})
.controller("ctrl", function($scope){

})

我創建了一個指令，該指令可以生成具有自定義屬性的自定義單選按鈕。 問題是我無法正確設置ng-model名稱，“ checked”屬性也無法正常工作。
請幫幫我，非常感謝！

Answer 1

使用簡寫語法=表示屬性名稱與您要在指令范圍內綁定的值相同。

如果聲明為<div my-rd foo="test">則必須在指令中指定

model: "=foo" //It tells $compile to bind to the foo attribute.

在您的指令中，您可以訪問該值

//directive will know only the property inside scope:{'your_propery': value}    
//to access the value inside directive {{your_propery}}
scope.model //{{model}}

在您的控制器中，您可以訪問該值

$scope.test //{{test }}

更多細節