How to use Angular templating tags in Foundation for Apps?

Question

I got this code from a Foundation for Apps page template here: Zurb

the code:

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

I realize it's easy enough to use an accordion but that's really not my question. After a little research I found that the above code is using Angular tag templating. However, I'm not sure how I can use this in my code Or why I would. This has to do with dynamically naming the title for what will be an active item in the accordion? In what scenario would I define the title variable being used above? Should the content simply be placed in the div?

Answer 1

using foundation template in your own app.

This is the code from 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 puts the template in its memory and you can get to it with $templateCache.get('components/accordion/accordion-item.html').

If you want to use it in a directive, simply point your templateUrl to "components/accordion/accordion-item.html"

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

override foundation's template

if you want to use your own template with foundation's javascript, simply use $templateCache.put().

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