how to Trigger the event in Angular when user change the windows height ?

Question

I need to count the element's position each time the user change windows height.so I create a directive.

  'use strict';
  angular.module "myApp"
  .directive 'uibPosition',['$position','$document','$timeout', ($position,$document,$timeout)->
    return {
      restrict: 'EAC',
      link: (scope, element, attr) ->
 //I want to Trigger this event when user change windows height
        $timeout ->
          if $document.height() - $position.position(element).top < 500
            element[0].querySelector('.custom-popup-wrapper').style.top = 'auto'
            element[0].querySelector('.custom-popup-wrapper').style.bottom = 40 + 'px'
          else
            element[0].querySelector('.custom-popup-wrapper').style.top = $position.position(element).top+40+'px'
    }
  ]

how to do it?I really appreciate it

Answer 1

You can add the watcher to the directive:

        var w = angular.element($window);

        scope.getWindowDimensions = function () {
            return {
                "h": w.height(),
                "w": w.width()
            };
        };
        var watcherTimeout;
        scope.$watch(scope.getWindowDimensions, function (newValue) {
            $timeout.cancel(watcherTimeout);
            watcherTimeout = $timeout(function(){
                scope.callback();   // call callback function
            }, 300);
        }, true);

        w.bind("resize", function () {
            scope.$apply();
        });