javascript - 使用 Angular 指令有条件加载模板

Question

我想根据屏幕尺寸加载不同的 html 模板。

Controller :

  $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

当前您正在将模板内容传递给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';
    }
}