Использование 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 конвертировать все HTML-файлы, которые будут добавлены в $templateCache, Я подтвердил, что HTML-файл добавлен в $templateCacheОднако при загрузке страницы возникают трудности с поиском только .html файлы, на которые есть ссылки в template функция.

Это проблема времени какого-либо рода? Есть ли лучший способ использовать функцию шаблона?

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) { ... } 
}

Альтернативный способ сделать это, открывающий намного больше опций, состоит в том, чтобы скомпилировать в функции ссылки:

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