具有多個模板的 AngularJS 指令

Question

任務：

• 顯示聯系方式。
• 聯系人是 JSON 數據，比如說 {name: "Mark", location: "England",phones: [...]}。
• 聯系人可以通過多種方式顯示：緊湊/詳細/通過附加信息增強（共享聯系人 - 附加指令）

因為聯系人可以在不同位置的不同頁面上顯示，所以很自然地為聯系人創建指令（小部件），但這里有一個問題： “如何用多個模板組織同一個小部件？”

選項：

1. 使用一個模板創建一個指令，根據聯系人“類型”隱藏部分-可能有很多 ng-switch 和 ng-if 的大模板
2. 為每個模板創建指令-幾乎相同的指令，只有不同的模板（或 templateURL）
3. 在鏈接時動態加載模板-在嵌入和替換（合並屬性）方面存在問題

你解決這些問題的經驗是什么？

Answer 1

我個人認為選項 2 在顯示模式之間提供了清晰的分離。 我創建了一個可用的 CodePen 示例來說明如何通過為每個模板使用單獨的指令來干凈地完成此操作。

我在 CodePen 示例中使用的方法利用了一個模板工廠，該工廠通過 Angular DI 注入到每個指令中。 模板工廠實現非常干凈，因為它僅使用ng-include模板字符串來支持每種不同的顯示模式（緊湊和詳細）。 實際的 HTML 模板（部分）可以存放在外部視圖文件或內部腳本塊中。

使用聯系指令很容易：

<contact compact ng-repeat="contact in contacts" ng-model="contact"></contact>

這將創建聯系人列表的緊湊版本。

<contact detailed ng-repeat="contact in contacts" ng-model="contact"></contact>

這將創建一個詳細的聯系人列表。

我承認我還沒有將這樣的代碼部署到生產中，所以可能存在我沒有考慮過的可擴展性或其他問題。 我希望我提供的代碼可以回答您的問題，或者至少為進一步探索提供靈感。

Answer 2

我已經建立了一種處理 Adam 示例的新方法，並使用了來自 angular 文檔的示例，其中他們討論了 templateUrl 屬性中的函數https://docs.angularjs.org/guide/directive ，這是來自 angular 文檔的 plunker： http ://plnkr.co/edit/h2CSf2WqCLYfPvzL9WQn?p=preview

.directive('myCustomer', function() {
    return {
      templateUrl: function(elem, attr){
        return 'customer-'+attr.type+'.html';
      }
    };
  });

這是我重新混合的解決方案：

http://codepen.io/anon/pen/wawOyz?editors=101

app.factory('templates', function() {
  return {
    compact:   'compact',
    detailed:  'detailed'
  };
 });

app.directive('contact', function(templates) {
  return {
    restrict: 'E',
    templateUrl: function($elem, $attr){
      return templates[$attr.mode];       
    },
    scope: {
      contact: '=ngModel'
    }
  };
});

我喜歡在一個工廠中擁有所有模板地址的想法，但我發現每個模式的指令非常重復，如果您有多個使用這種方法的元素，您將需要命名它們（聯系文本、電子郵件文本、公司文本) 所以他們不會崩潰。

我還不確定這是否是更好的方法，是否更短且更 DRY，但可能更難測試或更少可定制。 我只是想分享這種方法，以防它可以幫助任何人。