Question

我对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'});  

                   });

Answer 1

您可以使用templateurl，并使服务器提供模板，

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

您可以修改服务器端的模板。服务器将选择路线并决定要显示的模板。

Answer 2

有些人如何通过使用switch和custom指令来解决这个问题。

<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'
    };
});

不知道是否有更好的方法。期待有更好的替代解决方案..谢谢..

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

2 个答案: