Load different directive depend on screen size at AngularJS?

Question

I have 1 different component layout loaded by directive at bigger and smaller screen.

Is it possible to do that at AngularJS?

Have read the doc from here and here but no luck

Answer 1

You can get screen size in Angular with:

$scope.windowWidth = $window.innerWidth;

---

Based on this line, just ng-if or ng-show your 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

You can use the $window.innerWidth property inside your directive and manipulate your template accordingly.