Angular - How can I modify my Directive template to be two different templates?

Question

I have inherited an angular app and it uses one Directive to set the style for all grids used in the app. Customer now wants one of the grids to be different. How do I use the one Directive and make multiple Grid templates for the different grids? using now for all grids:

template: '<div class="gridStyle"><button>Delete</button>'

need for multiple grids:

template: '<div class="gridStyle"><button>Delete</button>
template: '<div class="gridStyleA"><button>Add</button>

score 0 · Answer 1 · answered Apr 01 '16 at 18:35

0

Without knowing more about your situation, you could try something along the lines of the following:

Using the directive in the markup:

<myDirective useClass="gridStyleA"></myDirective>

Then, within the directive:

template: '<div class="{{useClass}}"><button>Add</button>'

Note that I am not sure how the directive is used within your markup. Also, this could change depending on if your directive has an isolate scope or not.

answered Apr 01 '16 at 18:35

Josh

403
7
12

does not have an isolate scope – Webster Alexander III Apr 01 '16 at 18:52
If you're using (or willing to use) a directive link function, you could try applying the answer from this post in combo with my above suggestion: http://stackoverflow.com/questions/24651250/angularjs-directive-scope-attributes-without-an-isolated-scope – Josh Apr 01 '16 at 21:29

score 0 · Answer 2 · answered Apr 01 '16 at 21:44

The best way to do this is set template/templateUrl to be function which gets attrs as second parameter, so you can decide.

You can see its working here: https://plnkr.co/edit/8WKEH2UkFecLdeAz3h0t?p=preview

    templateUrl: function(element, attrs) {
      return (attrs.type === 'vertical') ?
        'numbers-vertical.html' :
        'numbers-horizontal.html';
    }

But clean design it should be just visual difference, not functional,

Angular - How can I modify my Directive template to be two different templates?

2 Answers2