AngularJS 1.5中同一组件中的多个模板

一尘不染

AngularJS 1.5中同一组件中的多个模板

angularjs

我可以在AngularJS 1.5组件中使用多个模板吗？我有一个具有一个属性的组件，因此我想基于该属性名称加载不同的模板。如何根据元素的属性名称加载模板？

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

谢谢。

阅读 229

2020-07-04

共1个答案

一尘不染

我使用两种方法在1.5.x中制作组件的动态模板：

1）通过attr属性传递：

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

2）将服务注入模板并从那里获取模板：

templateURL函数：

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

在getTemplate函数中，返回基于变量的模板URL

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

首先通过set方法将变量“ view”传递给工厂。

如果您需要在html模板中进行更多更改，请返回使用指令，并在更多支持下使用编译服务。

2020-07-04