javascript angularjs中指令的动态模板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15407753/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
dynamic template to directive in angularjs
提问by Aladdin Mhemed
I need to decide the template based on the date. I saw a good example. But in that example the templates are so simple that he could used strings. In my case I want use php to produce the templates, so I used it this way:
我需要根据日期决定模板。我看到了一个很好的例子。但在那个例子中，模板非常简单，他可以使用字符串。在我的情况下，我想使用 php 来生成模板，所以我这样使用它：
eng.directive('vis', function ($compile) {
var getTemplate = function(ir) {
var k = (ir.visits.last && parseInt(ir.visits.last.done))?'V':'E';
var s = (ir.data.kind == 0)?'H':'V';
return s+k+'T';
}
var linker = function(scope, element, attrs) {
scope.$watch('ir',function(){
if (!scope.ir) return;
element.html(jQuery('#'+getTemplate(scope.ir)).html()).show();
$compile(element.contents())(scope);
})
}
return {
restrict: "E",
rep1ace: true,
link: linker
};});
and the templates are:
模板是：
<div id=HVT style="display:none">
<p>horizontal view template</p>
</div>
<div id=HET style="display:none">
<p>horizontal {{1+5}} Edit template</p>
</div>
<div id=VVT style="display:none">
<p>vertical view template</p>
</div>
<div id=VET style="display:none">
<p>vertical Edit template</p>
</div>
I am sure there is a smarter way. is it better to use templateUrl ? could somebody tell me how to use it in my case?
我相信有更聪明的方法。使用 templateUrl 更好吗？有人可以告诉我如何在我的情况下使用它吗？
Edit: there is a problem. the template does not see the scope
编辑：有问题。模板看不到范围
回答by Ruud
This is also possible for creating dynamic templates in AngularJS: In your directive use:
这也可以用于在 AngularJS 中创建动态模板：在您的指令中使用：
template : '<div ng-include="getTemplateUrl()"></div>'
Now your controller may decide which template to use:
现在您的控制器可以决定使用哪个模板：
$scope.getTemplateUrl = function() {
return '/template/angular/search';
};
Because you have access to your scope parameters, you could also do:
因为您可以访问您的范围参数，您还可以执行以下操作：
$scope.getTemplateUrl = function() {
return '/template/angular/search/' + $scope.query;
};
So your server could create a dynamic template for you.
所以你的服务器可以为你创建一个动态模板。
回答by Aladdin Mhemed
I find the solution here
我在这里找到解决方案
in this example http://jsbin.com/ebuhuv/7/edit
在这个例子中http://jsbin.com/ebuhuv/7/edit
find this code:
找到这个代码：
app.directive("pageComponent", function($compile) {
var template_for = function(type) {
return type+"\.html";
};
return {
restrict: "E",
// transclude: true,
scope: true,
compile: function(element, attrs) {
return function(scope, element, attrs) {
var tmpl = template_for(scope.component.type);
element.html($("#"+tmpl).html()).show();
$compile(element.contents())(scope);
};
}
};});
回答by Mark Rajcok
With Angular, you don't need to use ids. Also, instead of display:noneyou can use ng-show:
使用 Angular，您不需要使用ids。此外，display:none您可以使用ng-show：
<div ng-show="HVT">
<p>horizontal view template</p>
</div>
<div ng-show="HET">
<p>horizontal {{1+5}} Edit template</p>
</div>
...
Your $watch callback (which you can define on a controller or in a directive) can then simply modify the appropriate scope property:
您的 $watch 回调（您可以在控制器或指令中定义）然后可以简单地修改适当的范围属性：
var getTemplate = function (ir) {
var k = (ir.visits.last && parseInt(ir.visits.last.done)) ? 'V' : 'E';
var s = (ir.data.kind == 0) ? 'H' : 'V';
return s + k + 'T';
}
$scope.$watch('ir', function () {
if (!$scope.ir) return;
// hide all, then show the one we want
$scope.HVT = false;
$scope.HET = false;
$scope.VVT = false;
$scope.VET = false;
$scope[getTemplate($scope.ir)] = true;
})
Fiddle. The fiddle has the above code in a controller, since I have no idea where you might be using the directive. The fiddle also just hardcodes "VET", since I don't know what irlooks like.
小提琴。小提琴在控制器中具有上述代码，因为我不知道您可能在哪里使用该指令。小提琴也只是硬编码“VET”，因为我不知道ir看起来像什么。
