Как установить ngModel в шаблоне директивы в Angular?

Вот это 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-модели, и свойство "флажок" не работает.
Пожалуйста, дайте мне руку, большое спасибо!

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 }}

Подробнее

Другие вопросы по тегам