Ionic Framework 和 AngularJS - 如何将移动联系人读入应用程序答案

【问题标题】：Ionic Framework and AngularJS - How to read mobile contacts into applicationIonic Framework 和 AngularJS - 如何将移动联系人读入应用程序
【发布时间】：2017-01-28 03:34:34
【问题描述】：

以下是我尝试过的代码。当我执行下面的代码时，它看起来就像我单击应用程序中的一个按钮并且它正在打开设备电话簿并显示联系人一样。当我单击任何联系人时，它会被应用程序选中，但它不应打开设备通讯录，但单击时它应在我的应用程序中显示我设备的联系人。谁能建议我如何做到这一点？

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");
        }
      );

    }
  }
])

【问题讨论】：

标签： android css angularjs cordova

【解决方案1】：

您可以尝试使用$cordovaContacts，它是ngCordova 的一部分（需要安装ngCordova）。您可以使用命令cordova plugin add cordova-plugin-contacts 在您的应用程序中安装。然后有一个简单的功能可以获取联系人列表中的所有联系人。

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

注意：好像是这样$cordovaContacts中的find()函数不能为空。包括即。一个过滤器让它工作。

编辑：

这是使 ngCordova 联系人插件正常工作所需的一般结构和功能的演示。

这是您在 JSFiddle 中需要的所有代码：https://jsfiddle.net/thepio/osjppoqu/

然后我只需在我的 app.html 文件中单击按钮调用getAllContacts 函数，如下所示：

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

请记住，它仅适用于真实设备，甚至可能不适用于模拟器（虽然尚未测试）。在您的模块中包含ngCordova。如果您在没有点击的情况下调用联系人插件或记住它只需要 AFTER 调用，则设备已准备好。在 Ionic 中，您可以执行以下操作：

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

【讨论】：

我已经添加了那个cordova插件并尝试了下面的getAllContacts（），但它没有显示联系人
您是否尝试过记录$scope.contacts 或返回的数据（如果它返回任何内容）？
@venkat 我自己试过了，在安装ngCordova 和联系人插件后它没有立即工作。您需要在联系人插件的find() 函数中包含一些内容。我编辑了我对一个有效的答案。
是的，我试过了，但它没有返回任何东西。下面是写过的代码，先谢谢了...
日志中是否有任何错误？您是否首先尝试过不提供任何服务，而是将其直接放入控制器中？您是否正确安装了 ngCordova？您是否在安装插件后重置了插件，即。删除然后重新添加平台？