AngularJS組件模板切換

Question

我環顧四周，還沒有找到適合我的答案。我有一個組件，使用John Papa的風格指南構建，向用戶顯示上傳的照片。

我想實現一些視圖，類似於Windows，MacOS允許您在詳細縮略圖列表視圖之間切換。

因爲視圖是如此不同，並保持代碼處於可維護狀態，所以我想將這些模板保存在單獨的文件中。

那麼我該如何實現呢？

不同的方法是：

.directive('myDirective', function() { 
    return { 
     templateUrl: function (tElement, tAttrs) { 
      if (tAttrs.type) { 
       if (tAttrs.type === 'thumb') { 
        return 'thumbnail.html'; 
       } 
       if (tAttrs.type === 'list') { 
        return 'list.html'; 
       } 
       if (tAttrs.type === 'detail') { 
        return 'detail.html'; 
       } 
      } 
     } 
    } 
}); 

的這裏的問題是，模板早就決定，不能改變，直到刷新。

<ng-switch on="post.viewMode"> 
    <ng-switch when="thumbnail" ng-include="'./thumbnail.html'"> 
    <ng-switch when="list" ng-include="'/list.html'"> 
    <ng-switch when="detail" ng-include="'/detail.html'"> 
</ng-switch> 

這似乎是最好的，但NG-包括創建一個新的範圍，其拋出了我的組件結構，一切都必須通過範圍進行訪問。$ parent.variable

最後一個選項是把所有將三個視圖放到同一個html模板文件中並使用ng-if使用正確的視圖。

Answer 1

是的，template/templateUrl函數是錯誤的方式，沒有範圍或內插屬性，這是通常被視爲控制指令行爲的方式。

與其他一些內置指令一樣，ng-include是一種快速避讓的方法（他們稱之爲「聲明式編程」），但也正是因爲上述原因而自以爲是的PITA - 它強制繼承範圍，即使您不願意不需要它。

.directive('myDirective', function ($templateRequest, $compile) { 
    return { 
     link: function (scope, element, attrs) { 
      var prevTplName; 
      var templates = { 
       thumb: 'thumbnail.html', 
       // ... 
      } 

      attrs.$observe('type', setTemplate); 

      function setTemplate(tplName) { 
       if (!templates.hasOwnProperty(tplName) || prevTplName === tplName) 
        return; 

       $templateRequest(templates[tplName]).then(function (response) { 
        var contents = $compile(response)(scope); 
        element.empty().append(contents); 
       }); 
      } 
     } 
    }; 
});