angularjs - 动态 templateUrl - AngularJS

Question

从 Angular 1.1.4 开始，您可以拥有动态模板 url。来自 here ,

templateUrl - Same as template but the template is loaded from the specified URL. Because the template loading is asynchronous the compilation/linking is suspended until the template is loaded.

You can specify templateUrl as a string representing the URL or as a function which takes two arguments tElement and tAttrs (described in the compile function api below) and returns a string value representing the 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>'

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

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

因为您可以访问范围参数，所以您还可以执行以下操作:

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

这样您的服务器就可以为您创建一个动态模板。