Как использовать угловые теги-шаблоны в Foundation for Apps?

Question

Я получил этот код от шаблона страницы Foundation for Apps здесь: Zurb

код:

<div class="accordion-item" ng-class="{'is-active': active}">
    <!-- {{ varialbe }} -->
  <div class="accordion-title" ng-click="activate()">{{ title }}</div>
  <div class="accordion-content" ng-transclude></div>
</div>

Я понимаю, что довольно легко использовать аккордеон, но это действительно не мой вопрос. После небольшого исследования я обнаружил, что в приведенном выше коде используется шаблонный тег Angular. Тем не менее, я не уверен, как я могу использовать это в своем коде или почему я бы это сделал. Это связано с динамическим присвоением названия заголовку для того, что будет активным элементом в аккордеоне? В каком сценарии я бы определил переменную заголовка, используемую выше? Должен ли контент просто помещаться в div?

Answer 1

используя шаблон фонда в вашем собственном приложении.

Это код из Foundation-Apps.

$templateCache.put('components/accordion/accordion-item.html',
    '<div class="accordion-item" ng-class="{\'is-active\': active}">\n' +
    '  <div class="accordion-title" ng-click="activate()">{{ title }}</div>\n' +
    '  <div class="accordion-content" ng-transclude></div>\n' +
    '</div>\n' +
    '');

$ templateCache.put помещает шаблон в его память, и вы можете получить к нему $templateCache.get('components/accordion/accordion-item.html').

Если вы хотите использовать его в директиве, просто укажите свой templateUrl на "components / accordion / accordion-item.html"

angular
  .module('app')
  .directive('myDirective', function() {
    return {
      templateUrl: 'components/accordion/accordion-item.html'
    };
  })

переопределить шаблон фонда

если вы хотите использовать свой собственный шаблон с javascript для Foundation, просто используйте $templateCache.put().

$templateCache.put('components/accordion/accordion-item.html',
        'my custom template');