使用 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()"/>'
  };
}

它加載了正確的模板，但在此過程中出現了問題，如您在圖片中所見：

是否有任何最佳實踐，或者您對如何以不同的方式進行操作有任何建議？

Answer 1

當前，您正在將template content傳遞給src ，該src正在嘗試制作一個 ajax 來獲取該模板，這就是您可以在控制台中看到 404 錯誤的原因。 您應該只返回 URL 表單getTemplateUrl方法。 因為ng-include src只接受templateUrl ，它會負責將該模板加載到 div 中。

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