使用 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';
    }
}