angularjs在不同的條件下插入不同的HTML模板

Question

我的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> 

第一個div其中ng-if="body"有一個固定的HTML，我只是改變模型值有動態視圖。

在ng-if="memory"我想插入不同的模板，在不同的HTML文件，根據條件本次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){ 
     $scope.memory=true 
    } 

爲了讓更多的見解：在父頁面我有練習手風琴名單，這是單擊列表元素在體內的相關記憶相關的練習和混合它的對應加載練習頁面。這就是爲什麼那些現在身體相關的練習具有相同的結構，因此他們有一個共同的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 
    }) 

我該怎麼辦呢？

Answer 1

我解決了這個用NG-包括：

<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