Question

我正在研究在AngularJS指令中格式化模板的方法。最常见的是：

内联

// Directive.js
app.directive('flipCard', [
  function() {
    return {
      template:
        "<div class='cardslot' ng-class='{\"switch\":shouldFlip}'> \
          <card-side candidate-model='currentCandidate' class='card-a-side'></card-side> \
          <card-side candidate-model='nextCandidate' class='card-b-side'></card-side> \
        </div>"
    };
  }
]);

优点：

将所有指令代码保存在1个文件（清洁程序）
不需要在运行时加载额外的文件

缺点：

难以格式化，丑陋
没有代码完成，没有标记突出显示
嵌套“in”in“和”可能会变得复杂

外部

// Directive.js
app.directive('directive', [
  function() {
    return {
      templateUrl: '/views/partials/directive.html'
    };
  }
]);

// Directive.html
<div class="cardslot" ng-class="{'switch':shouldFlip}">
  <card-side candidate-model="currentCandidate" class="card-a-side"></card-side>
  <card-side candidate-model="nextCandidate" class="card-b-side"></card-side>
</div>

优点：

清洁格式
代码突出显示＆amp;代码完成
通过删除html标记并保留javascript

缺点：

每个指令需要一个额外的文件（编码和运行时）
可能会觉得使用较小的模板代码有点过分

这是A列中的一些，B列中的一些。所以如何在它们之间进行选择？什么时候内联格式更好？外部格式何时更适合？

更一般地说，我应该考虑其他方法吗？

Answer 1

在我的项目中，我同时执行这两种方法;）：

开发：为每个模板创建一个单独的文件（如果需要，可以使用模块子文件夹），这是一个好习惯，因为它维护简单，易读。
runtime / packaging-build：我使用html2js通过模板内容实时替换templateUrl字符串。

详细代码，优化生成的代码，更少的HTTP命中，缓存的模板等......

Answer 2

我更喜欢第三种方法，即使用templateUrl引用现有标记中元素的id。恕我直言，我认为它与Angular的声明式方法更为一致

<div ng-app="pageModule"
    ng-controller="parentCtrl">
    <script type="text/ng-template" id="myTemplate">
        <span ng-click="remove()">{{label}}</span>
    </script>
    <div my-directive></div>
</div>



var pageModule = angular.module('pageModule',[])
.controller('parentCtrl',function($scope) {
})
.directive('myDirective',function() {
    return {
        restrict : 'A',
        templateUrl : 'myTemplate'

格式化AngularJS指令模板的方法

2 个答案: