0

I am making a hbrid app using ionic and have encountered the following problem. I have tried both

<ion-nav-view ng-style="winHeight"></ion-nav-view>

and

<ion-nav-view style="{{winHeight}}"></ion-nav-view>

but none of thoes gets value from my controller

if (!angular.isArray(data)) {
    $scope.winHeight = 'height: ' + ($window.innerHeight - 40) + 'px !important';
} else {
    $scope.winHeight = 'height: ' + ($window.innerHeight) + 'px !important';
}

console.log($scope.winHeight);

console.log give me the correct text, but when I load and inspect the element, everything I see is

<ion-nav-view ng-style="winHeight" class="view-container" nav-view-transition="ios" nav-view-direction="none" nav-swipe="">

or

<ion-nav-view style="{{winHeight}}" class="view-container" nav-view-transition="ios" nav-view-direction="none" nav-swipe="">

When I instead write

<ion-nav-view style="height:528px !important;"></ion-nav-view>

it works like I want, but then it's not dynamic. Anyone know what I did wrong?

Hunter Turner
  • 6,804
  • 11
  • 41
  • 56
BluePrint
  • 1,926
  • 4
  • 28
  • 49

1 Answers1

0

It should be ng-style should be JSON & just pass height value from winHeight variable

<ion-nav-view ng-style="{height: winHeight}"></ion-nav-view>

Code

if (!angular.isArray(data)) {
    $scope.winHeight = ($window.innerHeight - 40) + ' px !important';
} else {
    $scope.winHeight =($window.innerHeight) + 'px !important';
}
Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299