Angularディレクティブを使用したテンプレートの条件付き読み込み

Question

画面サイズに応じて異なるHTMLテンプレートを読み込みたいとします。

コントローラー：

$scope.getTemplateUrl = function() { 
    if ($scope.md) { 
     return $templateCache.get('library/timelineeditor/slidelibrary/slidelibrary.html') 
    } else { 
     return $templateCache.get('library/timelineeditor/slidelibrary/slidelibrary-mobile.html') 
    } 
    } 

指令：

function SlideLibrary() { 
    return { 
    restrict: 'E', 
    scope: {}, 
    bindToController: true, 
    controller: 'SlideLibraryController', 
    controllerAs: 'vm', 
    template: '<ng-include src="getTemplateUrl()"/>' 
    }; 
} 

それは右のテンプレートをロードしていますが、PICで見ることができるように何かが道に沿ってうまくいかない：

これに関するベストプラクティスはありますか、それをどうやって行うかについてのアドバイスはありますか？

Answer 1

現在あなたがそのテンプレートを取得するためのAJAXをしようとしているsrcにtemplate contentを渡しているあなたは、コンソールに404エラーを見ることができる理由、それはです。 URLフォームgetTemplateUrlを返すだけです。 srcのng-includeはtemplateUrlのみを受け入れるため、そのテンプレートをdivにロードする際には注意が必要です。

$scope.getTemplateUrl = function() { 
    if ($scope.md) { 
     return 'library/timelineeditor/slidelibrary/slidelibrary.html'; 
    } else { 
     return 'library/timelineeditor/slidelibrary/slidelibrary-mobile.html'; 
    } 
}