Getting an actual size in pixels of <ion-content> in the hybrid app


#1

Hello everyone!

I am developing a hybrid app based on Cordova and Ionic.
In my app I need to getting an actual size of the area <ion-nav-view> between the top <ion-nav-bar> and the lower <ion-tab> as in the standard template ‘tabs’.

I try the following code (pieces of code):

index.html

<ion-nav-bar class="bar-stable">
  <ion-nav-back-button>
  </ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>

tabs.html

<ion-tab title="Plan" icon-off="ion-map" icon-on="ion-map" href="#/tab/plan">
  <ion-nav-view name="tab-plan"></ion-nav-view>
</ion-tab>

plan.html

<ion-view view-title="Plan" class="plan-page">
  <ion-content scroll="false">
    <plan-elem src-plan="img/8floor"></plan-elem>
  </ion-content>
</ion-view>

controllers.js

app.controller('PlanCtrl', [$scope, function($scope) {
  $scope.plan = {};
}]);

directives.js

app.directive('planElem', function() {
  return {
    restrict: 'E',
    scope: {
      srcPlan: '@'
    },
    templateUrl: 'templates/plan-elem.html',
    link: function(scope, element, attrs) {
      plan = {
        actualWidth: element[0].offsetWidth,
        actualHeight: element[0].offsetHeight
      }
    }
  };
});

templates/plan-elem.html

<img src="{{srcPic}} + {{plan.actualWidth}} + 'x' + {{plan.actualHeight}} + '.png'">

But it does not seem to work correctly.
Prompt me how may be obtained an actual size in pixels of the element in plan.html for Android and iOS devices.

Thanks everyone!