使用 ng-include 和 $templateCache 找不到文件

Question

我有一个指令，我试图根据注入到指令中的对象动态加载不同的部分

function countSummary() {
    var directive = {
        scope: {
            countData: '='
        },
        link: link,
        template: '<div ng-include=\'countData.countType === "expected" ? ' +                         '"/app/count/countsummary/countExpected.html" :' +
                   '"/app/count/countsummary/countBlind.html"\'>' +
                   '</div>'
    }
    return directive;

    function link(scope, element, attrs) { ... } 
}

我正在使用 grunt-html2js 转换要添加到 $templateCache 的所有 html 个文件。我已验证 html 文件已添加到 $templateCache，但是当我加载页面时，很难仅找到 template 中引用的 .html 文件函数。

这是任何类型的时间问题吗？有没有更好的模板函数使用方法？

Answer 1

ng-include 参数需要评估为 URL。我将执行以下操作，这将随着范围变量的变化而动态变化（使用 ng-if 指令将有条件地在视图之间切换）：

function countSummary() {
  var directive = {
    scope: {
      countData: '='
    },
    link: link,
    template: '<div ng-if="countData.countType === \'expected\'" ng-include="\'/app/count/countsummary/countExpected.html\'"></div>' +
    '<div ng-if="countData.countType !== \'expected\'" ng-include="\'/app/count/countsummary/countBlind.html\'"></div>'
  }
  return directive;

  function link(scope, element, attrs) { ... } 
}

另一种方法是在 link 函数中编译：

<script type="text/ng-template" id="my_template_1">
  <div ng-if="countData.countType === 'expected'" ng-include="/app/count/countsummary/countExpected.html"></div>
  <div ng-if="countData.countType !== 'expected'" ng-include="/app/count/countsummary/countBlind.html"></div>
</script>

function link(scope, element, attrs) {

  var html = $templateCache.get('my_template_1');

  // parse HTML into DOM element
  var template = angular.element( html );

  // compile the template
  var linkFn = $compile(template);

  // link the compiled template with the scope
  var el = linkFn(scope);

  // append to DOM
  element.appendChild(el);
}

使用 ng-include 和 $templateCache 找不到文件

using ng-include along with $templateCache not finding file

angularjs

ng-html2js

angular-templatecache

grunt-html2js