加载不同的指令取决于AngularJS的屏幕大小？

Question

我有一个不同的组件布局，在更大和更小的屏幕上由指令加载。

是否有可能在AngularJS上做到这一点？

已阅读here和here的文档，但没有运气

Answer 1

您可以通过以下方式获取Angular的屏幕尺寸：

$scope.windowWidth = $window.innerWidth;

根据这一行，只需ng-if或ng-show你的div：

<div directive1 ng-if="windowWidth < 768">
    Directive1 on small screens
</div>

<div directive2 ng-if="windowWidth >= 768">
    Directive2 on large screens
</div>

Answer 2

您可以使用指令中的$window.innerWidth属性并相应地操作模板。