Question

我正在尝试根据参数将模板加载到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>

小提琴： https://jsfiddle.net/rsvmar2n/1/

我能以某种方式这样做吗？我在考虑使用ng-switch：https://jsfiddle.net/rsvmar2n/6/

但我确信有一种更有棱角的方法可以做到。

编辑：我不想为我要加载的每个部分做一个http请求（我认为ngInclude会这样做。

Edit2：使用 ng-include 和缓存模板结束。 https://jsfiddle.net/rsvmar2n/24/

Answer 1

为此创建指令，例如：

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">

Answer 2

您可以调用一个函数，该函数返回ng-include中模板的id并使用缓存模板。工作example显示了您可以做的事情。

控制器中处理模板的功能如下：

$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">
    <!-- load a different template (partial) depending on the value of item.type -->
    <div ng-include="getTemplate(item)"></div>
  </div>
</body>

Answer 3

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

使用 ng-switch

ng-if="item.type=='type2'||item.type=='type3'"

LoadMultipleTemplate根据您的选择加载多个模板。

LoadSingleTemplate加载单个模板。

修改

使用 ng-include ，这样您就可以加载动态视图。

在这个例子中，我没有提出任何条件。但是在ng-repeat中你可以放置另一个ng-repeat并基于内部ng-repeat你可以做的事情。但对于内部ng-repeat，你必须根据json对象制作。

loadViews

<div ng-repeat="item in example.items" class="someClass" > <ng-include src="item.type + '.html'">{{item.type}}</ng-include> </div>

Answer 4

使用ng-include可以动态分配源代码 - 因此在您的父模板中可以有

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

其中templateName是控制器中的变量名

$scope.templateName = 'path/to/my/template.html';

并在摘要中更改此值应为您动态更新内容

动态加载Angular.js

4 个答案: