When it comes to deciding on a template based on the date, I came across an interesting example. However, in that specific example, the templates were so simple that strings could have been used. In my case, I prefer using PHP to generate the templates, so here's how I implemented it:
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",
replace: true,
link: linker
};});
As for the templates themselves:
<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>
While this setup works, I believe there might be a more efficient way to handle templates. Would using templateUrl be a better option? If so, can someone provide guidance on how to implement it in my scenario?
Edit: There seems to be an issue with the template not recognizing the scope.