一个指令中的模板取决于条件

如何替换指令中的div标签？

例如，我有一个带有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

提前感谢

我正在使用眼动仪，并且有很多面板。通过眼睛位置，我检查用户正在看的指令。那么哪个面板是焦点：

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>

如果第一个面板位于焦点上，则调用路由面板更新方法。在这里，我想加载一个模板。我不想在 html 文件中制作 if 标签。