Angular template and passed in object variable name

Question

I have the following code

 <div data-ng-repeat="entity in myItems">
     <div data-entity-vignette="true">
     </div>
  </div>

Entity Vignette is defined as an attribute directive here:

.directive('entityVignette', function() {
    return {
        restrict: 'A',
        templateUrl: '../Assets/Scripts/entityVignette.html'
    }
});

and entityVignette.html contains

<div>{{ entity.DisplayName }}</div>

My question, is how can code my template so that entityVignette.html does not depend on the variable name entity

That is, to work with my variable of entity, I must use data-ng-repeat="entity in myItems", how could I make it work so that enitityVignette.html doesn't care if it's named entity or for instance item?

Josep · Accepted Answer · 2014-10-25 05:22:21Z

1

One way to do it would be to isolate the scope of your directive. For example, declare you directive like this:

.directive('entityVignette', function() {
    return {
        restrict: 'A',
        scope: {nameToDisplay:'='},
        templateUrl: '../Assets/Scripts/entityVignette.html'
    }
});

Use it like this:

 <div data-ng-repeat="entity in myItems">
     <div data-entity-vignette="true" data-name-to-display="entity.DisplayName">
     </div>
  </div>

And in your template just do this:

<div>{{ nameToDisplay }}</div>

answered Oct 25, 2014 at 5:22

Josep

13.1k2 gold badges44 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular template and passed in object variable name

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related