Question

从Angular 1.1.4开始，您可以拥有一个动态模板网址。来自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'
  }
}

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

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

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

Answer 2

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

Answer 3

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

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

Answer 4

为不支持文件API（＆lt; IE10）的浏览器创建文件上传回退时遇到类似问题。关键的区别是我需要页面智能地决定显示哪个模板而不需要打开属性值。

我最终使用constant提供程序作为我的指令。常量基本上设置了可以在指令中的任何位置注入的默认参数。我只是让常量调用一个函数来确定浏览器支持，然后在我需要确定要拉出哪个模板时引用该值。这很好，因为 1）没有可供参考的属性，并且 2）在预先链接阶段可以使用 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 (...); }
})();

动态templateUrl - AngularJS

4 个答案: