AngularJS指令dynamic模板

对不起，也许这是愚蠢的问题，但我还在学习。

我试图根据范围值使用不同的模板进行指令。

这是我到目前为止，我不知道为什么不工作http://jsbin.com/mibeyotu/1/edit

Html元素：

<data-type content-attr="test1"></data-type> 

指示：

 var app = angular.module('myApp', []); app.directive('dataType', function ($compile) { var testTemplate1 = '<h1>Test1</h1>'; var testTemplate2 = '<h1>Test2</h1>'; var testTemplate3 = '<h1>Test3</h1>'; var getTemplate = function(contentType){ var template = ''; switch(contentType){ case 'test1': template = testTemplate1; break; case 'test2': template = testTemplate2; break; case 'test3': template = testTemplate3; break; } return template; }; var linker = function(scope, element, attrs){ element.html(getTemplate(scope.content)).show(); $compile(element.contents())(scope); }; return { restrict: "E", replace: true, link: linker, scope: { content:'=' } }; }); 

Answer 1

1）你在HTML中传递内容作为属性。 尝试这个：

 element.html(getTemplate(attrs.content)).show(); 

代替：

 element.html(getTemplate(scope.content)).show(); 

2）指令的数据部分正在被编译，所以你应该使用别的东西。 而不是数据types，例如datantypes。

链接在这里：

http://jsbin.com/mibeyotu/6/edit

Answer 2

您可以将您的指令定义对象的template属性设置为将返回dynamic模板的函数：

 restrict: "E", replace: true, template: function(tElement, tAttrs) { return getTemplate(tAttrs.content); } 

请注意，此时您无权访问范围，但可以通过tAttrs访问属性。

现在你的模板在编译阶段之前就已经确定了，你不需要手动编译它。

Answer 3

你也可以这样直截了当地做：

 appDirectives.directive('contextualMenu', function($state) { return { restrict: 'E', replace: true, templateUrl: function(){ var tpl = $state.current.name; return '/app/templates/contextual-menu/'+tpl+'.html'; } }; }); 

Answer 4

如果您需要基于$scopevariables加载模板，您可以使用ng-include ：

 .directive('profile', function() { return { template: '<ng-include src="getTemplateUrl()"/>', scope: { user: '=data' }, restrict: 'E', controller: function($scope) { //function used on the ng-include to resolve the template $scope.getTemplateUrl = function() { //basic handling if ($scope.user.type == 'twitter') { return 'twitter.tpl.html'; } if ($scope.user.type == 'facebook') { return 'facebook.tpl.html'; } } } }; }); 

参考： https ： //coderwall.com/p/onjxng/angular-directives-using-a-dynamic-template