angularjs在不同的条件下插入不同的HTML模板答案

【问题标题】：angularjs inserting different HTML templates on different conditionsangularjs在不同的条件下插入不同的HTML模板
【发布时间】：2016-12-09 00:55:21
【问题描述】：

我的 HTML 有以下部分：

<div ng-if="body">
  <div align="center">
    <h3>Body</h3>
    ...
  </div>  
</div>

<div ng-if="memory">
  <div align="center">
  <h3>Memory game</h3> <=
  </div>  
</div>

ng-if="body" 的第一个 div 具有固定的 HTML，我只是将模型值更改为具有动态视图。

在第二个 div 中，ng-if="memory" 我想根据条件（可能在我的控制器中定义？）插入位于不同 HTML 文件中的不同模板

我的控制器有以下内容：

var exerciseType = Number($stateParams.exerciseId);
    console.log("Exe type from client: "+ exerciseType);
    if(exerciseType===1 ||exerciseType===3|| exerciseType===5 || 
        exerciseType===7 || exerciseType===9 || exerciseType===11 || exerciseType===12){
        $scope.body=true
    }
    else if(exerciseType===2){
        $scope.memory=true
    }

提供更多见解：在父页面上，我有一个手风琴式练习列表，其中包含身体相关和记忆相关的练习，点击列表元素它对应的练习页面被加载。这就是为什么那些$stateParams.exerciseId 现在与身体相关的练习具有相同的结构，因此它们有一个共同的 HTML：只是模型值会随着不同的身体相关练习而变化。

另一方面，每个与记忆相关的练习都有完全不同的逻辑，因此每个练习都有自己的 HTML。

路线：

.state('tab.plan', {
      url: '/plan',
       resolve: {
        authenticated: ['djangoAuth', function(djangoAuth){
          return djangoAuth.authenticationStatus();
        }],
      },
      views: {
        'tab-plan': {
          templateUrl: '/templates/tab-plan.html', <= my accordion list
          controller: 'planCtrl'
        }
      },
      cache: false
    })

    .state('tab.exercise', {
      url: '/plan/:exerciseId', //:dayId/:exerciseId
       resolve: {
        authenticated: ['djangoAuth', function(djangoAuth){
          return djangoAuth.authenticationStatus();
        }],
      },
      views: {
        'tab-plan': {
          templateUrl: '/templates/video.html', <= page where exercises are loaded, the first code snippet is from this page!
          controller: 'videoCtrl'
        }
      },
       cache: false
    })

我该怎么做？

【问题讨论】：

你到底面临什么问题？
我不太确定如何插入如此不同的 HTML？ ng-include 似乎是一个选项，但不确定如何使用它

标签： angularjs

【解决方案1】：

我使用 ng-include 修复了这个问题：

<div ng-if="memory">
  <div align="center">
  <h3>Memory game</h3>
  <ng-include src="template"></ng-include>
  </div>  
</div>

在我的控制器中：

var exerciseType = Number($stateParams.exerciseId);
    console.log("Exe type from client: "+ exerciseType);
    if(exerciseType===1 ||exerciseType===3|| exerciseType===5 || 
        exerciseType===7 || exerciseType===9 || exerciseType===11 || exerciseType===12){
        $scope.body=true
    }
    else if(exerciseType===2 || exerciseType===4){
        $scope.memory=true
        if(exerciseType===2){
            $scope.template="./templates/template1.html"
        }
        if(exerciseType===4){
            $scope.template="./templates/template2.html"
        }
    }

我创建了两个 HTML 模板 template1.html 和 template2.html

【讨论】：