CODEWITHSUNDEEP
iosionic-frameworkdevicecordova-plugins
TJ1
TJ1

Reputation: 8468

ionic getting device information for ios does not work while same code works for Android

I am trying to find what type of ios device my code is running on (iPhone 4s or iPhone 5 etc).

Here are html and js codes that I have. This is index.html:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title></title>
  <link href="lib/ionic/css/ionic.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
  <script src="lib/ionic/js/ionic.bundle.js"></script>
  <script src="js/ng-cordova.min.js"></script>
  <script src="cordova.js"></script>
  <script src="js/app.js"></script>
</head>
<body ng-app="starter" ng-controller="DeviceController">
  <ion-pane>
    <ion-header-bar class="bar-stable">
      <h1 class="title">Device Information</h1>
    </ion-header-bar>
    <ion-content>
      <div class="item item-text-wrap">
        <ul class="list">
          <li class="item">
            Manufacturer : {{manufacturer}}
          </li>
          <li class="item">
            Model : {{model}}
          </li>
          <li class="item">
            Platform : {{platform}}
          </li>
          <li class="item">
            UUID : {{uuid}}
          </li>
        </ul>
      </div>
    </ion-content>
 </ion-pane>
 </body>
 </html>

And here is my app.js:

angular.module('starter', ['ionic', 'ngCordova'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.controller('DeviceController', function($ionicPlatform, $scope, $cordovaDevice) {
  $ionicPlatform.ready(function() {
    $scope.$apply(function() {
      var device = $cordovaDevice.getDevice();
      $scope.manufacturer = device.manufacturer;
      $scope.model = device.model;
      $scope.platform = device.platform;
      $scope.uuid = device.uuid;
    });
  });
});

The code works fine on Android, and gets all the requested information including device type and Android version, etc. But on iPhone the information is empty and I do not get any info back with the same code.

Is there anything I need to change for ios?

Upvotes: 1

Views: 701

Answers (1)

thepio
thepio

Reputation: 6253

I think a better and working way to do this would be:

.controller('DeviceController', function($ionicPlatform, $scope) {

  document.addEventListener("deviceready", onDeviceReady, false);

  function onDeviceReady() {
    $scope.manufacturer = device.manufacturer;
    $scope.model = device.model;
    $scope.platform = device.platform;
    $scope.uuid = device.uuid;
  }   

});

You do not need to define the variable var device = $cordovaDevice.getDevice();

You may also use your way of using $ionicPlatform.ready() the document listener is just a way I like to write it and see it but I would imagine you don't need the $scope.$apply() to anything.

Official documentation: https://github.com/apache/cordova-plugin-device

EDIT (Add my personal code which works by request)

Do not mind if my module structure is a little different from yours.

So this is my testController.js

angular.module('testApp.testController', [])
  .controller('testController', function($scope) {

  'use strict';

  document.addEventListener('deviceready', onDeviceReady, false);

  function onDeviceReady() {
    console.log('device ready');
    $scope.manufacturer = device.manufacturer;
    $scope.model = device.model;
    $scope.platform = device.platform;
    $scope.uuid = device.uuid;
  }

});

And here is my test.html

<ion-view class="testview">
  <ion-content class="test-list">
    <div>Manufacturer: {{manufacturer}}</div>
    <div>Model: {{model}}</div>
    <div>Platform: {{platform}}</div>
    <div>UUID: {{uuid}}</div>
  </ion-content>
</ion-view>

Then I just run ionic build ios and run it on my device with xcode. It shows up all the information just fine. Also tested in Android and works too!

Upvotes: 1

Related Questions