javascript - AngularJS directive scope not resolved ("attr name is not defined" error)

Question

Directive code

mymodule.directive('eicon', function(){
    return {
        restrict: 'E',
        scope: {
            attr: '='
        },
        template: "test " + attr.name
    }
});

Html

<tr ng-repeat="e in entities">
    <td><eicon attr="e"></eicon></td>
</tr>

I've this error: ReferenceError: attr is not defined. What's wrong?

Answer 1

Since you are declaring isolated scope property attr you should be able to access scope.attr in template like this:

mymodule.directive('eicon', function(){
    return {
        restrict: 'E',
        scope: {
            attr: '='
        },
        template: "test {{attr.name}}"
    }
});

Demo: http://plnkr.co/edit/YZ0aPqhkMlIIwmrkKK2v?p=preview