16

因此，从 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'
  }
}

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

4

4 回答 4

29

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

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

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

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

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

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

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

于 2013-08-15T07:18:45.617 回答
4 
templateUrl: function (elem, attrs) {
return attrs["template"] == "table" ?
"tableTemplate.html" : "itemTemplate.html";
}
于 2015-09-08T08:05:03.333 回答
1

So the issue was with how I hacked the typeahead directive ... I was setting a scope variable on the typeahead, to be evaluated on the typeaheadPopup directive. Instead, I just passed the templateType attr directly as string & evaluated that. 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>");

Instead of "template-type='templateType'"

于 2013-06-13T14:11:31.860 回答
1

在为不支持文件 API (< IE10) 的浏览器创建文件上传回退时遇到了类似的问题。关键区别在于我需要页面智能地决定要显示哪个模板，而不需要打开属性值的好处。

我最终为我的指令使用了常量提供者。常量基本上设置了可以在指令中的任何位置注入的默认参数。我只是让常量调用一个函数来确定浏览器支持，然后在需要确定要拉取哪个模板时引用该值。这很好，因为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 (...); }
})();
于 2015-07-31T12:46:00.450 回答