使用Angular指令条件加载模板

Question

我想根据屏幕大小加载不同的html模板。

控制器：

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

指令：

SELECT nameAni, weigth
   FROM Animal
WHERE idTpAni IN (SELECT idTpAni
                    FROM TypeAnimal
                    WHERE libTpAni = 'DOG') AND
        weight > AVG(weigth) over ()

它会加载正确的模板，但是在图片中您可以看到一些问题：

是否有关于此的最佳做法，或者您对如何以不同方式做出任何建议？

Answer 1

目前您正在将template content传递给src，它正在尝试创建用于获取该模板的ajax，这就是为什么您可以在控制台中看到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';
    }
}