Angular JS - 有没有办法动态选择模板答案

【问题标题】：Angular JS - Is there any way to dynamically select templatesAngular JS - 有没有办法动态选择模板
【发布时间】：2014-06-19 21:27:23
【问题描述】：

我的 angularjs 路由器功能有问题：

如何为我的应用动态选择模板。

我有一个完全由'its api's' 驱动的应用程序。该api包含'template info along with them'.

例如api：

 [{
"rootName" : "home1",
"pageTitle"   : "Home1",
"templateName" : "template_home_1"
    },
   {
"rootName" : "home2",
"pageTitle"   : "Home2",
"templateName" : "template_home_2"
   },
    {
"rootName" : "home3",
"pageTitle"   : "Home3",
"templateName" : "template_home_2"
  }]

这样做的原因是选择 UI 的可重用性和灵活性。

我如何用 Angular 做到这一点。有没有办法动态选择模板。

我的路由器是这样的：

demoApp.config(function($routeProvider){
                  $routeProvider
                   .when('/mainpage/:pageid',
                    {   
                       controller:'mainpageController',
                          template : function (pageid) {
                          //this information is avilable at my api
                       }
                     })
                   .otherwise({redirectTo:'/mainpage/home'});  

                   });

【问题讨论】：

究竟是什么问题？您是否尝试在模板函数中进行异步调用？
是的@ivarni..模板需要动态选择...我是Angular js的新手..
docs.angularjs.org/api/ngRoute/provider/$routeProvider#usage 的文档没有提到任何关于模板函数的异步支持，所以我不确定这有多大可能。如果路线相当静态，我可能会考虑提前获取它们。
我从服务器获取数据后是否可以初始化路由器..那时我可以编写一些自定义函数来获取模板信息..
这就是问题所在，您在生命周期的配置步骤中无权访问$http 服务。如何将一些逻辑移动到服务器并让模板函数返回类似/templates/page/home1、/templates/page/home2 的内容，然后在服务器端查找正确的模板并返回它？或者等待比我聪明的人出现:)

标签： javascript angularjs angularjs-directive angularjs-ng-repeat angular-ui

【解决方案1】：

你可以使用templateurl，让服务器为模板服务，

.when('/mainpage/:pageid',{templateUrl:'/tpl/:pageid'})

您可以在服务器端修改模板。服务器将选择路由并决定显示哪些模板。

【讨论】：

我不完全确定如何在客户端实现动态模板，但在服务器端我可以使用像 JADE 这样的动态模板引擎来提供基于角色/参数的模板。
我从服务器获取数据后是否可以初始化路由器..那时我可以编写一些自定义函数来获取模板信息..
你可以使用类似 when('/mainpage/:pageid', { controller:'mainpageController', templateurl : 'tpl/:id' }) 的东西，让服务器决定抛出哪个模板。我目前正在将此架构与 node mongo 和 angularjs 一起使用。
我认为您可以编写一些自定义指令来在代码中加载异步内容，我在 angular-googlemaps 中看到过，但不确定它是如何实现的。
如果我选择 switch case 并选择模板 viva src 怎么办？ ——

【解决方案2】：

一些如何通过使用 switch 和自定义指令来解决这个问题。

<div ng-switch on="data.templateName">
 <div ng-switch-when="template_1">
    <template_1></template_1>
 </div>
 <div ng-switch-when="template_2">
    <template_2></template_2>
 </div>
 <div ng-switch-default>{{data}}</div>
</div>

并由指令定义为

 demoApp.directive('template1', function() {
    return {
        restrict: 'E',
        templateUrl: 'app/partials/template1.html'
    };
});

不知道有没有更好的方法。期待有其他更好的解决方案..谢谢..

【讨论】：