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?

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?

• javascript
• angularjs
• angularjs-directive

Share Improve this question Follow asked Feb 8, 2015 at 12:50 brazorfbrazorf 1,96122 gold badges3232 silver badges5555 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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

attr is accessible in scope, so you can access scope.attr in your controller or linking phase, or {{attr}} in templates. A simple solution is to change your template to

mymodule.directive('eicon', function(){
    return {
        restrict: 'E',
        scope: {
            attr: '='
        },
        template: "test {{attr.name}}",
        link: function (scope, element, attrs) {
          console.log(scope.attr);
        },
        controller: function (scope) {
          console.log(scope.attr);
        }
    }
});