在根据conditon某个指令指向模板 [英] templates in one directive depending on conditon
问题描述
这怎么可能在指令替换div标签？
How is it possible to replace a div tag in the directive?
比如说我有一个div标签面板：
For instance I have a panel with a 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>
和我有一个模板的变化Div.html
<div class="whatever2">
I am the new div-Tag!
</div>
这可能吗？如果是的话怎么样？吴秀会是一个又另类，但不是很好的。我想定义许多模板此标记。根据条件（变量）模板应加载。
在该指令可以加载一个模板，但我怎么能决定应加载哪个模板？
Is this possible? If yes how? The ng-show would be also a alternative, but not a nice one. I want to define many templates for this tag. depending on the condition (variable) the template should be loaded. In the directive you can load a template, but how can I decide which template should be loaded?
例如，如果检查=真正的负载模板1如果检查是假的LAOD模板2
For instance if checked= true load template 1- if checked is false laod template 2
THX提前
我使用的是眼球追踪系统，并有许多面板。而随着眼睛的位置我检查在用户观看的指令。因此，这是面板上的重点：
I am using an eyetracker and have many panels. And with the eye positions I check in the directive where user is looking. So which panel is on focus:
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看起来如下：
And the html looks following:
<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 the first panel is on focus than the routePanelUpdate methods is called. And here I want to load an template. I do not want to make if-tags in the html file.
推荐答案
确定。我得到了解决我自己的。
Ok. I got the solution on my own.
我用$ templateRequest，比HTML转换为实际的DOM节点。这个我之前清除与旧的数据为空（）：
I use $templateRequest and than convert the html to an actual DOM node. Before this I clear the old data with 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);
});
}
};
如果有人有更好的解决方案，因此请告诉我。
If somebody have a better solution so pls tell me.
这篇关于在根据conditon某个指令指向模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
