CODEWITHSUNDEEP
androidcssangularjscordova
venkat
venkat

Reputation: 41

Ionic Framework and AngularJS - How to read mobile contacts into application

Below is the code I have tried. When I execute the code below it appears as when I click a button in my application and it is opening device phone book and displaying contacts. When I click on any contact it is picked by application but it should not open device address book but when clicked it should display the contacts of my device in my application. Can anyone suggest me how to do this?

HTML:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, r-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="cordova.js"></script>
  <script src="js/app.js"></script>
</head>

<body ng-app="starter" ng-controller="AppCtrl" class="platform-android platform-cordova platform-webview">

  <ion-pane>
    <ion-header-bar class="bar-stable">
      <button class="button" ng-click="pickContact()">Contacts</button>
      <h1 class="title">All Contacts</h1>
    </ion-header-bar>
    <ion-content>
      <div class="list">

        <a class="item item-thumbnail-left" ng-repeat="contact in data.selectedContacts">
                    <img src="{{contact.photos[0].value}}" ng-if="contact.photos.length > 0">

                    <h2>{{contact.displayName}}</h2>
                    <p ng-if="contact.emails.length > 0">{{contact.emails[0].type}} : {{contact.emails[0].value}}</p>
                    <p ng-if="contact.phones.length > 0">{{contact.phones[0].type}} : {{contact.phones[0].value}}</p>
                </a>

      </div>
      <p class="padding"></p>
    </ion-content>
  </ion-pane>
</body>

</html>

Javascript:

angular.module('starter', ['ionic'])
  .run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {

      if (window.cordova && window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      }
      if (window.StatusBar) {
        StatusBar.styleDefault();
      }
    });
  })

.service("ContactsService", ['$q',
  function($q) {

    var formatContact = function(contact) {

      return {
        "displayName": contact.name.formatted || contact.name.givenName + " " + contact.name.familyName || "Unknown Person",
        "emails": contact.emails || [],
        "phones": contact.phoneNumbers || [],
        "photos": contact.photos || []
      };

    };

    var pickContact = function() {

      var deferred = $q.defer();

      if (navigator && navigator.contacts) {

        navigator.contacts.pickContact(function(contact) {

          deferred.resolve(formatContact(contact));
        });

      } else {
        deferred.reject("Hurray!!!!......  No contacts in desktop browser");
      }

      return deferred.promise;
    };

    return {
      pickContact: pickContact
    };
  }
])

.controller("AppCtrl", ['$scope', 'ContactsService',
  function($scope, ContactsService) {

    $scope.data = {
      selectedContacts: []
    };

    $scope.pickContact = function() {
      ContactsService.pickContact().then(
        function(contact) {
          $scope.data.selectedContacts.push(contact);
          console.log("Selected contacts=");
          console.log($scope.data.selectedContacts);

        },
        function(failure) {
          console.log("Hurray!!!!......  Failed to pick a contact");
        }
      );

    }
  }
])

Upvotes: 3

Views: 1519

Answers (1)

thepio
thepio

Reputation: 6263

You could try using $cordovaContacts which is a part of the ngCordova (ngCordova needs to be installed). You can install in your app with the command cordova plugin add cordova-plugin-contacts. Then there is a simple function to getting all contacts in your contacts list.

$scope.getAllContacts = function() {
  $cordovaContacts.find({filter: '',multiple:true}).then(function(allContacts) {
    $scope.contacts = allContacts;
  });
};

Note: It seems to be so that the find() function in $cordovaContacts can not be empty. Include ie. a filter in there for it to work.

EDIT:

This is a demonstration of the general structure and functions which you need to make the ngCordova contacts plugin to work.

Here's all my code you'll need in a JSFiddle: https://jsfiddle.net/thepio/osjppoqu/

And then I just call the getAllContacts function using a button click in my app.html file like this:

<button type="button" ng-click="getAllContacts()" class="button button-block button-positive">Get contacts</button>

REMEMBER it only works on a real device, probably not even emulator (haven't tested though). Include the ngCordova in your module. If you're calling the contacts plugin without a click or something remember that it is required that it's only called AFTER the device is ready. In Ionic you can do this with the following:

$ionicPlatform.ready(function() {
  // Call the plugin here
});

Upvotes: 1

Related Questions