javascript - angularjs中指令的动态模板

Question

我需要根据日期来决定模板。我看到了一个很好的example . 但在那个例子中，模板非常简单，他可以使用字符串。在我的例子中，我想使用 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
};});

模板是:

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

我相信有更聪明的方法。 使用 templateUrl 更好吗？有人可以告诉我如何在我的案例中使用它吗？

编辑:有问题。模板没有看到范围

Answer 1

这也可以用于在 AngularJS 中创建动态模板: 在您的指令中使用:

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

现在您的 Controller 可以决定使用哪个模板:

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

因为您可以访问范围参数，所以您还可以:

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

因此您的服务器可以为您创建一个动态模板。