Question

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

例如，我有一个带有div-tag的面板：

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

我有一个模板 change-Div.html

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

这可能吗？如果有，怎么样？ ng-show也是一个替代品，但不是一个好的。我想为这个标签定义许多模板。根据条件（变量），应加载模板。在指令中，您可以加载模板，但是如何确定应该加载哪个模板？

例如，如果checked = true，则加载模板1-如果选中false，则为laod template 2

事先提前

我正在使用eyetracker并拥有许多面板。通过眼睛位置，我检查用户正在查看的指令。那么关注哪个小组：

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。

Answer 1

你可以使用ng-bind-html =＆＃34; yourVariable＆＃34;在父div上并在contoller中更改yourVariable 并且你需要在更改值后使用$ sce.trustAsHtml（yourVariable）并包括＆＃39; $ sce＆＃39;作为控制器的依赖

Answer 2

您可以在需要时使用ng-include指令与ng-if结合使用模板。

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

Answer 3

确定。我自己得到了解决方案。

我使用$ templateRequest而不是将html转换为实际的DOM节点。在此之前，我用empty（）清除旧数据：

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

                    });
                }
            };

如果有人有更好的解决方案，请告诉我。

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

3 个答案: