Question

我在指令中实现了一个自定义模板，如下所示：

  .directive('card', function() {
      return {
          restrict: 'E',
          replace: true,
          templateUrl: function(element, attrs) {
              return '/app/templates/' + attrs.cardtype + '.html';
          }
      };
  });

生成指令的主模板如下所示：

<card ng-repeat="card in cards" cardtype="{{card.cardtype}}"></card>

注意我正在使用“cardtype”属性来选择合适的模板，然后在指令中假设模板名称。

只要cardtype属性解析为模板中的html文件，这样就可以正常工作。但是，如果文件不存在，我会收到错误：

Error: [$compile:tpload] Failed to load template: /app/templates/{{card.cardtype}}.html

为了呈现默认模板，捕获此错误的最佳方法是什么？

Answer 1

我会尝试问$templateCache，这个模板是否存在。如果您不使用模板缓存，我强烈建议您使用它。您可以设置a grunt task来扫描所有.tpl.html文件并设置模板缓存以供使用。通过这种方式，没有真正的HTTP请求将被触发以获取模板。

有关如何使用templateCache的一个很好的示例，请参阅ng-boilerplate (ngbp)

捕获templateUrl路径错误

1 个答案: