iJade iJade - 3 months ago 16
Javascript Question

AngularJS : Pass $scope variable as directive attribute

I'm trying to pass the $scope variable values to a custom directive as attribute, but it's not working.

Here is the HTML code:

<ul ng-repeat="q in questions">
<li>
{{q.question}}
<check-list name="{{q.id}}"></check-list>
</li>
</ul>


The directive is
<check-list name={{q.id}}></check-list>
, and here is the directive code :

app.directive('checkList',function(){
return {
restrict:'E',
template: function(elem,attrs){
console.log(attrs.name);
return '</br> <input type="radio" /> Yes </br> <input type="radio" /> No'
},
link:function(scope,elem,attrs){

}
};
})


I'm logging the attribute
attrs.name
but the value I'm getting is
"{{q.id}}"
instead of the actual value of
q.id

Answer

I suppose what you want to do is injecting scope object from controller to your directive. So you can define your directive as

app.directive('checkList',function(){
    return {
        restrict:'E',
        scope: {
          name: "="
        }
        template: '{{name}}</br> <input type="radio" /> Yes </br> <input type="radio" /> No',
        link:function(scope,elem,attrs){

        }
    };
}

And in your view, you can reference your directive as

<check-list name="q.id"></check-list>