如何在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

在您自己的应用中使用基础模板。

这是来自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，只需使用$ templateCache.put（）。

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