Javascript 在Angular.js中动态加载模板（部分）_Javascript_Angularjs

Javascript 在Angular.js中动态加载模板（部分）

javascript angularjs

Javascript 在Angular.js中动态加载模板（部分）,javascript,angularjs,Javascript,Angularjs,我正在尝试根据参数将模板加载到Angular应用程序中。它将位于ng foreach内： <body ng-app="MyApp" ng-controller="ExampleController as example"> <div ng-repeat="item in example.items" class="someClass" ng-switch="item.type"> <!-- load a different template (p

我正在尝试根据参数将模板加载到Angular应用程序中。它将位于ng foreach内：

<body ng-app="MyApp" ng-controller="ExampleController as example">
   <div  ng-repeat="item in example.items" class="someClass" ng-switch="item.type">
      <!-- load a different template (partial) depending on the value of item.type -->
   </div>
</body>

小提琴：

我可以这样做吗？我在考虑使用ng开关：

但我相信有一种更具角度的方法

编辑：我不希望对我要加载的每个部分都执行http请求（我认为ngInclude可以做到这一点）

Edit2：使用ng include和缓存模板结束。

为此创建指令，类似于：

app.directive('myDirective', function(){
  return {
    restrict: 'E',
    scope: {item: '=item'},
    templateUrl: function(element, attrs){
      if (!attrs.type) return 'default.html';
      return attrs.type + 'html';
    }
  } 
});

然后您可以创建不同的模板，如type1.html、type2.html

在控制器中，您只需执行以下操作：

<my-directive ng-repeat="item in items" item="item", type="item.type">

根据条件，您可以加载一个或多个模板，如下所示

使用ng开关

ng-if="item.type=='type2'||item.type=='type3'"
根据您的选择加载多个模板
加载单个模板
编辑
使用ng include，您可以通过这种方式加载动态视图
在本例中，我没有设置任何条件。但是在ng repeat中，您可以设置另一个ng repeat，并且基于内部ng repeat，您可以执行这些操作。但是对于内部ng repeat，您必须根据json对象进行设置

{{item.type}
使用ng include可以动态分配源-因此在父模板中可以

<div ng-include src="templateName"></div>

在摘要中更改此值应该可以动态更新内容
您可以调用一个函数，该函数在ng include and use cached templates中返回模板的id。该工作显示了您可以执行的操作
控制器中处理模板的函数如下所示：

$scope.getTemplate = function(item) { switch(item.type) { case "type1": return 'testtype1.html'; default: return 'testtype2.html'; } }
还有你的html

<script type="text/ng-template" id="testtype1.html"> <p>This is the template 1</p> </script> <script type="text/ng-template" id="testtype2.html"> <p>This is the template 2</p> </script> <body ng-app="MyApp" ng-controller="ExampleController"> <div ng-repeat="item in items" class="someClass">  <div ng-include="getTemplate(item)"></div> </div> </body>

这是模板1 这是模板2
关于
ngInclude
？是的。我想到了，但我不清楚它是如何工作的（角度文档的魔力）。我应该从我的服务器公开一些HTML，然后用ngInclude加载它们吗？你能举个代码示例吗？我不想对我要加载的每个部分都做http请求（我认为ngInclude可以做到这一点）。您可以在
$templatecache

$scope.getTemplate = function(item) { switch(item.type) { case "type1": return 'testtype1.html'; default: return 'testtype2.html'; } }

<script type="text/ng-template" id="testtype1.html"> <p>This is the template 1</p> </script> <script type="text/ng-template" id="testtype2.html"> <p>This is the template 2</p> </script> <body ng-app="MyApp" ng-controller="ExampleController"> <div ng-repeat="item in items" class="someClass">  <div ng-include="getTemplate(item)"></div> </div> </body>