Динамический шаблонUrl - AngularJS

Итак, из 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'
  }
}

Учитывая, что у меня нет доступа к области, как мне это сделать?

Ответы

Ответ 1

Для создания динамических шаблонов в AngularJS возможно также следующее: В вашей директиве используйте:

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

Теперь ваш контроллер может решить, какой шаблон использовать:

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

Поскольку у вас есть доступ к вашим параметрам области видимости, вы также можете:

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

Таким образом, ваш сервер может создать для вас динамический шаблон.

Ответ 2

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

Ответ 3

Итак, проблема заключалась в том, как я взломал директиву typeahead... Я устанавливал переменную scope в typeahead, которая должна быть оценена в директиве typeaheadPopup. Вместо этого я просто передал templateType attr непосредственно как строку и оценил это. Например.

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

Ответ 4

В подобную проблему возникла проблема при создании резервного копирования файлов для браузеров, которые не поддерживают File 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 (...); }
})();