动态templateUrl - AngularJS

Question

从Angular 1.1.4开始,您可以拥有一个动态模板URL.从这里开始,

templateUrl - 与模板相同,但模板是从指定的URL加载的.由于模板加载是异步的,因此编译/链接将暂停,直到加载模板为止.

您可以将templateUrl指定为表示URL的字符串,或者指定为带有两个参数tElement和tAttrs的函数(在下面的编译函数api中描述)并返回表示url的字符串值.

如何利用它来生成基于我的指令属性的动态模板？显然这不起作用,因为tAttrs.templateType只是字符串"templateType"

templateUrl: function (tElement, tAttrs) {
  if (tAttrs.templateType == 'search') {
    return '/b/js/vendor/angular-ui/template/typeahead/typeahead.html'
  } else {
    return '/b/js/vendor/angular-ui/template/typeahead/typeahead2.html'
  }
}

鉴于我无法访问范围,我该如何管理？

Answer 1

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

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

现在您的控制器可以决定使用哪个模板:

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

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

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

因此,您的服务器可以为您创建动态模板.