More than one template in same component in AngularJS 1.5

angularjs, angularjs-components

Solution

I use two ways for making dynamic template of a component in 1.5.x:

1) Pass via attr property:

templateUrl: function($element, $attrs) {
      return $attrs.template;
}

2) Inject a service into template and get template from there:

templateURL function:

templateUrl: function($element, $attrs,TemplateService) {
      console.log('get template from service:' + TemplateService.getTemplate());
      return TemplateService.getTemplate();
}

In getTemplate function return template url based on variable

getTemplate: function(){
     if (this.view = "user") {
          return "user.html";
    } else if (this.view = "user") {
          return "shop.html";
    } else {
        console.log("none")
    } 
    return "shop.html";       
}

Pass variable 'view' to factory firstly via a set method.

If you need more change in html template, back to use directive and use compile service with more support.

Problem

Can I use more than one template in AngularJS 1.5 components ? I have one component having one attribute, so I want to load different template based on that attribute name. How can I achieve loading of templates based on attribute name of element? ``` jsConfigApp.component('show', { templateUrl: 'component/show.html', //How to change it based on attribute value? bindings:{ view:"@" }, controller: function () { console.log(this.view) if (this.view = "user") { console.log("user") } else if (this.view = "user") { console.log("shop") } else { console.log("none") } } }) ``` Thanks.

Original source