取決於條件的一個指令中的模板

比如我有一個div標籤面板：

<div class="panel panel-primary"> 
     <div class="panel-heading">Heading</div> 
     <div class="panel-body"> 
      <div class="whatever"> 
      This tag has to be replaced in the directive after the counter is 10! 
     </div> 
    </div>

和我有一個模板變化Div.html

<div class="whatever2"> 
    I am the new div-Tag! 
</div>

這可能嗎？如果是的話如何？ ng-show也可以替代，但不是很好。我想爲這個標籤定義很多模板。取決於條件（變量）模板應該加載。在指令中您可以加載模板，但我怎樣才能決定應該加載哪個模板？

例如，如果檢查，如果檢查=真正的負載模板1 - 是我使用的是眼球追蹤系統，並有許多面板假LAOD模板2

THX提前

。用眼睛位置檢查用戶正在看的指示。那麼哪個面板是焦點：

myApp.directive('travelInformation', function ($rootScope, $interval) { 
return { 
    restrict: 'A', 
    scope: { 
     updateMethod: '=', 
    }, 
    link: function (scope, element, attrs) { 
     var routePanelCounter = 0; 
     var timeTablePanelCounter = 0; 
     var count = 10; 

     this.routePanelUpdate = function (element) { 
      routePanelCounter +=1 
      if (routePanelCounter == count) { 
       //replace the old tag with the new template1 

      } 
     }; 

     this.timeTablePanelUpdate = function (element) { 
      timeTablePanelCounter += 1; 
      if (timeTablePanelCounter == count) { 
       //replace the old tag with the new template2 
      } 

     }; 


     $interval(function() { 
      var boundingRect = element[0].getBoundingClientRect(); 
      if ($rootScope.gazePoints){ 
       for (var i = 0; i < $rootScope.gazePoints.length; i++) { 
        var x = $rootScope.gazePoints[i].x; 
        var y = $rootScope.gazePoints[i].y; 

        if (x >= boundingRect.left && x <= boundingRect.right && y >= boundingRect.top && y <= boundingRect.bottom) { 
         console.log("Has Focus"); 
         this[scope.updateMethod](element); 
        } 
       } 
      } 
     }, 3000); 
    } 
};

}）;以下

和HTML外觀：

<div class="panel panel-primary fixed-panel" travel-information data-update-method="'routePanelUpdate'"> 
<div class="panel-heading">test1</div> 
<div class="panel-body"> 
    old content /// replace the the div-tag with a new template 
    </div> 
</div> 

<div class="panel panel-primary fixed-panel" travel-information data-update-method="'timeTablePanelUpdate'"> 
<div class="panel-heading">test2</div> 
    <div class="panel-body"> 
    <div> 
     Old content 
    </div> 
    </div> 
</div>

如果第一個面板上的焦點比routePanelUpdate方法被調用。在這裏我想加載一個模板。我不想在html文件中製作if-tags。

來源

2015-10-26 Minas Minas

ü可以在父DIV使用NG綁定，HTML =「yourVariable」和位指示改變yourVariable MBE法ü將需要改變值後使用$ sce.trustAsHtml（yourVariable）和包括「$ SCE」作爲控制器的依賴關係

來源

2015-10-26 09:43:34

請檢查上面的代碼。 –

您可以根據需要在ng-include指令和ng-if的組合中包含模板。

<div ng-if="fish ==='salmon'" ng-include="'whatever.html'"></div> 
<div ng-if="fish ==='perch'" ng-include="'whatever2.html'"></div>

來源

2015-10-26 10:10:33 JimmyRare

但是這應該發生在指令中。我怎樣才能做到這一點？ –

您只需在模板內爲指令添加此標記。請務必妥善整理您的文件和文件夾，以便您可以更輕鬆地維護應用程序。 – JimmyRare

我編輯我的代碼來解釋我真正想要的。請檢查以上 –

好的。我自己得到了解決方案。

我使用$ templateRequest並將html轉換爲實際的DOM節點。在此之前，我用空的（）清除舊數據：

this.routePanelUpdate = function (element) { 
       routePanelCounter += 1 
       if(routePanelCounter == 10){ 
        element.empty(); 
        $templateRequest(templateURL).then(function (html) { 
         var template = angular.element(html); 
         element.append(template); 

        }); 
       } 
      };

如果有人有更好的解決方案，請告訴我。

來源

2015-10-28 10:00:30

取決於條件的一個指令中的模板

回答

相關問題