Ionic specific issue on getting window height in directive

Question

I am trying to make a div on resize reach fill the entire height of the window minus a certain amount.

For some reason I get the following error:

ionic.bundle.js:26794 TypeError: w.height is not a function
at scope.getWindowDimensions (app.js:283)
at Scope.$digest (ionic.bundle.js:30230)
at Scope.$apply (ionic.bundle.js:30503)
at done (ionic.bundle.js:24824)
at completeRequest (ionic.bundle.js:25022)
at XMLHttpRequest.requestLoaded (ionic.bundle.js:24963)

However, if I remove my ionic.bundle.js from the header, it works. (note that I am using this in the browser)

Directive

.directive('resize', function ($window) {
    return function (scope, element) {
        var w = angular.element($window);
        console.log(w);
        scope.getWindowDimensions = function () { return { 'h': w.height(), 'w': w.width() }; };
        scope.$watch(scope.getWindowDimensions, function (newValue, oldValue) {
            scope.windowHeight = newValue.h;
            scope.windowWidth = newValue.w;
            scope.style = function (amount) { return {  'height': (newValue.h - amount) + 'px', 'width': (newValue.w - amount) + 'px' }; };
            scope.height = function (amount) { return { 'height': (newValue.h - amount) + 'px' }; };
        }, true);
        w.bind('resize', function () { scope.$apply(); });
    }
})

TEMPLATE

<div id="pageContent" ng-style="height(75)" resize>
Stuff here
</div>

CSS

#pageContent {
   position: relative;
   padding-bottom: 20px;
   z-index: 2;
   overflow: auto;
}

score 0 · Answer 1 · edited May 23 '17 at 12:30

If you didn't noticed, jQLite does not implement those jQuery methods, you can use jQuery with angularjs if you like (not recomended) or you can use raw window object.

The window object doesn't have those function. You can find those functions when using jQuery but on raw javascript you only have window.screen where you have window.screen.height and window.screen.width as well.

If can find a proper way to calculate this on this question: Get the size of the screen, current web page and browser window.

Or by simple using w.screen.height and w.screen.width as well.

score 0 · Answer 2 · answered Nov 14 '16 at 19:41

Correct me if I am wrong, but, I thing you want get screen dimensions in your app, right?

Well, you don't need to use jQLite for this, you can inject $window and use $window.screen

Have a look at following this ionicforum thread and to understand how you can use $window to achieve your objective. You can also go through this article: http://www.gajotres.net/ionic-framework-get-page-height-width/ to understand how this works.

Hope this helps.

Ionic specific issue on getting window height in directive

2 Answers2