如何在Foundation for Apps中使用Angular模板标记

Question

我从应用程序基础页面模板中获得了这段代码：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

在自己的应用程序中使用基础模板

这是来自基金会应用程序的代码。

$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/accordination/accordinationitem.html"

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

覆盖基础模板

如果您想将自己的模板与基金会的javascript一起使用，只需使用$templateCache.put（）.

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