Dynamic template for directive in angularjs

Question

I need to select a template based on a date. I saw a good example . But in this example, the patterns are so simple that he could use strings. In my case, I want to use php to create templates, so I used it like this:

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

 <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? can someone tell me how to use it in my case?

Edit: There is a problem. the template does not see the area

Answer 1

It is also possible to create dynamic templates in AngularJS: In your directive, use:

 template : '<div ng-include="getTemplateUrl()"></div>' 

Now your controller can decide which template to use:

 $scope.getTemplateUrl = function() { return '/template/angular/search'; }; 

Since you have access to your scope parameters, you can also:

 $scope.getTemplateUrl = function() { return '/template/angular/search/' + $scope.query; }; 

Thus, your server can create a dynamic template for you.

Answer 2

I found a solution here

in this example 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); }; } };}); 

Answer 3

With Angular you do not need to use id s. Alternatively, instead of display:none you can use 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 the controller or in the directive) can simply change the corresponding scope property:

 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 script has the above code in the controller, since I have no idea where you can use the directive. The violin also just hardcodes "VET" since I don't know what ir looks like.