1

我从 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 中？

4

1 回答 1

2

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

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

$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');
于 2016-01-08T21:42:42.957 回答