1

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?

2 Answers 2

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

3
  • What if i need to access the code then? That template will depend on that value
    – brazorf
    Feb 8, 2015 at 13:08
  • What do you mean "access the code"? Are you talking about link function where you can manipulate with scope.attr object?
    – dfsq
    Feb 8, 2015 at 13:10
  • @dfsq you can check my answer for samples
    – Rebornix
    Feb 8, 2015 at 13:16
2

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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.