QI.soa QI.soa - 2 months ago 7
Javascript Question

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

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

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();
        });