更改列表和详细视图模板ng-view

时间:2014-03-06 09:50:12

标签: angularjs

我想在主页,列表和详细信息视图中加载模板,例如,我可以使用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>

1 个答案:

答案 0 :(得分:0)

我认为在这种情况下有用的指令ng-include

e.g。 <div ng-include="template.url"></div>

并在控制器中:

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

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