javascript - 在不使用 ng-click 的情况下使用 Ionic + Cordova + AngularJS 显示联系人列表

标签 javascript angularjs cordova ionic-framework

我正在尝试在我的智能手机上显示我的联系人列表。我可以做到这一点,但要求显示列表的唯一方法是通过 ng-click 调用 findcontact() 函数。

我试图从 Controller 中调用 findcontact() 函数,但没有成功。

如何在不单击此按钮的情况下显示此列表?

首先是 javascript,然后是 HTML。

angular.module('starter.controllers', [])

.controller('contacts2', ['$scope', 'PhoneContactsFactory', function($scope, PhoneContactsFactory) {
    
	$scope.findContact = function()
    {
        PhoneContactsFactory.find().then(function(contacts)
        {
            $arr = [];
            for (var i = 0; i < contacts.length; i++)
            {
				$arr.push({name: contacts[i].name.formatted})
			}
            $scope.contacts = $arr;
        });
		
    };
}])

.factory("PhoneContactsFactory", ['$q', function($q)
{
    return {
        find: function()
        {
            var deferred = $q.defer(); // asynchronous
            var options = new ContactFindOptions();
            options.multiple = true;
            var fields = ["displayName", "name"];
            
            navigator.contacts.find(fields, 
				function(contacts){ deferred.resolve(contacts); }, //onsuccess
				function(error){ deferred.reject(error); }, // onerror
				options);
            return deferred.promise;
        }
	};
}]);
<div ng-controller="contacts2">
    <button ng-click="findContact()">Push 2</button>
	<ion-list>
	    <ion-item ng-repeat="contact in contacts">
	      {{contact.name}}
	    </ion-item>
	  </ion-list>
	</div>

非常感谢!

yts

最佳答案

#ionic irc chan 上的讨论最终给出了一个简单的解决方案。问题是竞争条件。由于联系人列表仅在 cordova 重新加载页面时显示,我认为问题可能与第一次加载时未准备好的插件有关。

所以我用 $ionicPlatform.ready(function()) 更新了我的 Controller 代码,它现在运行良好。

最新代码在这里:https://github.com/lennycartier/ionic-contactlist

有关此(简单)问题的非常有趣的文章,请参阅 raymondcamden.com 博客。

还有我关于此的小文章:http://www.datanotes.org/13-ionic-framework-and-deviceready

yts

关于javascript - 在不使用 ng-click 的情况下使用 Ionic + Cordova + AngularJS 显示联系人列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27474756/

相关文章:

javascript - 如果 1 个值大于另一个值,则按钮提交时发出通知

angularjs - Angular、Redux、ES6、单元测试 Controller

ruby-on-rails - #!使用具有多种布局的 Angular/Rails 导致路由问题

javascript - Cordova 插件上的 count++

javascript - 如何创建html5的详细信息标签

javascript - 重新加载页面后显示警报

javascript - 使用当前的 jQuery Cycle 幻灯片更新 DIV 内容

javascript - Fore 应用新元素作为指令的默认元素

javascript - 在带有 TACO 的 Visual Studio 中,推荐使用什么方式来维护 Web 托管 SPA 和混合应用程序?

angularjs - 如何使用 ngcordova 文件传输插件将拍摄的图像传输到我的 ftp