动态模板网址 - AngularJS答案

【问题标题】：Dynamic templateUrl - AngularJS动态模板网址 - AngularJS
【发布时间】：2013-06-09 02:15:23
【问题描述】：

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

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

鉴于我无权访问范围，我该如何管理？

【问题讨论】：

从 Angular 1.2.17（可能更早）开始，您最初的想法似乎可行。

标签： angularjs angular-ui

【解决方案1】：

所以问题在于我如何破解 typeahead 指令......我在 typeahead 上设置了一个范围变量，以便在 typeaheadPopup 指令上进行评估。相反，我只是将 templateType attr 作为字符串直接传递并对其进行了评估。例如

var popUpEl = angular.element(
  "<typeahead-popup " +
    "matches='matches' " +
    "active='activeIdx' " +
    "select='select(activeIdx)' " +
    "template-type='" + attrs.templateType + "'" +
    "query='query' " +
    "position='position'>" +
  "</typeahead-popup>");

而不是"template-type='templateType'"

【讨论】：

【解决方案2】：

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

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

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

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

因为您可以访问范围参数，所以您也可以这样做：

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

所以你的服务器可以为你创建一个动态模板。

【讨论】：

虽然这很有趣，但它似乎违背了角度设计的原则，因为它在指令和控制器之间引入了依赖关系，这将削弱指令的封装和独立功能。
您可以改为在指令中的link: 属性内声明/分配动态函数，因为链接可以接受回调function(scope, element, attrs)，它提供对scope 的访问。这提高了它的独立能力。

【解决方案3】：

为不支持文件 API (

我最终为我的指令使用了constant 提供程序。常量基本上设置了可以在指令中的任何位置注入的默认参数。我只是让常量调用一个函数来确定浏览器支持，然后在需要确定要拉取哪个模板时引用该值。这很好，因为 1) 没有可引用的属性，并且 2) 在您无权访问控制器的预链接阶段可用。

(function () {
  var myDir = angular.module('myDir', []);
  myDir.constant('myDirConfig', {
      hasFileSupport: fileApiIsSupported()
    });

  myDir.directive('myDir', ['myDirConfig', function (myDirConfig) {
      return {
          templateUrl: function () {
              if (myDirConfig.hasFileSupport) {
                  return 'pathToTemplate/html5.html';
              } else {
                  return 'pathToTemplate/fallback.html';
              }
          }
      };
  }];

  function fileApiIsSupported() { return (...); }
})();

【讨论】：

【解决方案4】：

templateUrl: function (elem, attrs) {
return attrs["template"] == "table" ?
"tableTemplate.html" : "itemTemplate.html";
}

【讨论】：

虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。