AngularJS $watch window resize inside directive

Question

I have revealing module pattern which looks like this:

\'use strict\';

angular.module(\'app\', [])
   .directive(\'myDirective\', [\'SomeDep\', function (So         


        

Answer 1

You shouldn't need a $watch. Just bind to resize event on window:

DEMO

'use strict';

var app = angular.module('plunker', []);

app.directive('myDirective', ['$window', function ($window) {

     return {
        link: link,
        restrict: 'E',
        template: '
window size: {{width}}px
'
     };

     function link(scope, element, attrs){

       scope.width = $window.innerWidth;

       angular.element($window).bind('resize', function(){

         scope.width = $window.innerWidth;

         // manuall $digest required as resize event
         // is outside of angular
         scope.$digest();
       });

     }

 }]);