更改列表和詳細視圖模板ng-view

Question

我想在主頁面，列表和詳細視圖中加載模板，例如，我可以用stateprovider來做到這一點，還是我必須用routeprovider？如何在不改變鏈接的情況下導入模板？

app.config(function config($stateProvider) { 
    $stateProvider.state('inventory',{ 
    url:'/inventory', 
     views: { 
      "main": { 
       controller: 'InventoryCtrl', 
       templateUrl: 'inventory/main.tpl.html' 
      } 
     }, 
     data:{ pageTitle: 'Inventory' } 
    } 
).state('add',{ 
    url:'/inventory/list', 
     views: { 
      "main": { 
       controller: 'InventoryCtrl', 
       templateUrl: 'inventory/add.tpl.html' 
      } 
     }, 
     data:{ pageTitle: 'List field' } 
    }); 
}); 

模板

<li data-ng-class="{active: listViewEnabled}" class="toolbaritem"><a href="#/inventory/list"><span class="glyphicon glyphicon-align-justify"></span> List View</a></li> 

<div ng-view="main"></div> 

Answer 1

我認爲在這種情況下有用的指令ng-include。

例如<div ng-include="template.url"></div>

和控制器：

$scope.changeTemplate = function(templateName){ 
    $scope.template.url = '/path/to/'+templateName; 
} 

文檔：http://code.angularjs.org/1.2.13/docs/api/ng.directive:ngInclude