我们如何在angularjs中将模板添加到div中

Question

我陷入了一些骨干的概念，我尝试在角度js中实现它。 在backbonejs中，我们可以添加一个模板（html页面）到一个特定的div标签，我们可以渲染该div本身。有可能做相同的angularjs？添加模板到一个div并使其

Answer 1

您可以在script标签扔模板和ngInclude和ngView通过ID号是：

文档：http://docs.angularjs.org/api/ng.directive:script

例子：http://jsfiddle.net/guilleferrer/bxdrA/1/

<div ng-app=""> 
    <script type="text/ng-template" id="/tpl.html"> 
    Content of the template. 
    </script> 

    <ng-include src="'/tpl.html'"></ng-include> 
</div> 

Answer 2

我会推荐使用ui-router。它将允许您在模板的根目录中包含多个“视图”。例

<div ui-view="header"></div> 
    <div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span2 main-menu-span"> 
     <div class="nav-collapse sidebar-nav"> 
      <ul ui-view="nav-bar" class="nav nav-tabs nav-stacked main-menu"></ul> 
     </div><!--/.well --> 
     </div> 
     <div id="content" class="span10" ui-view="main"> 
     <div ui-view="breadcrumbs"></div> 
     </div> 
    </div> 
    </div> 
</div> 

在你的模块配置对象：

var tickets = { 
     name: 'tickets', 
     url: '/tickets', 
     abstract: true, 
     views: { 
      'header': { 
       templateUrl: 'header.tpl.html' 
      }, 
      'nav-bar': { 
       templateUrl: 'nav-bar.html' 
      }, 
     } 
    }; 
    var list = { 
     name: 'tickets.list', 
     parent: 'tickets', 
     url: '', 
     views: { 
      'main@': { 
       templateUrl: 'list.tpl.html', 
       controller: TicketQueue, 
      }, 
     }, 
    }; 
    $stateProvider.state(tickets); 
    $stateProvider.state(list);