从单独的文件使用它时，cordova 联系人无法正常工作

Question

我正在尝试使用 cordova 联系人插件。这是我在 app.js 文件中得到的内容。

angular.module('app', ['ionic', 'app.controllers'])
.config(function($stateProvider, $urlRouterProvider, $compileProvider){

 $stateProvider 
  .state('app.contacts', {
    url: "/contacts",
    views: {
      'menuContent': {
        templateUrl: "templates/contacts.html",
        controller: 'ContactsController'
      }
    }
  });

});

我还有一个 app-starter.js 文件，用于初始化控制器。这也是我初始化 ngCordova 所需的地方，因此我可以使用 cordova 联系人插件：

angular.module('app.controllers', ['ngCordova']);

然后在联系人控制器文件中我有这个：

(function(){
    angular.module('app.controllers')
    .controller('ContactsController', ['$scope', ContactsController]);

    function ContactsController($scope, $cordovaContacts){

        var me = this;
        me.contacts = [];

        me.fetchContacts = function(){
            alert('now fetching contacts..');
            $cordovaContacts.find({ multiple: true}).then(
                function(results){
                    alert('contacts fetched! heres the first one: ');
                    alert(results[0]['displayName']);
                    me.contacts = results;
                }, 
                function(error){
                    alert('error retrieving contacts');
                }
            );
        };

    };
})();

我还有另一个控制器（主应用程序控制器），用于存储我在整个应用程序中使用的方法：

(function(){
    angular.module('app.controllers')
    .controller('AppController', ['$scope', AppController]);

    function AppController($scope){

        var me = this;

        me.alert = function(){
            alert('alert');
        };


    };
})();

fetchContacts方法基本上只是监听一个点击事件。然后它获取联系人。

这是 templates/contacts.html 文件：

<ion-view view-title="Contacts" ng-controller="ContactsController as contacts_ctrl">
  <ion-content>
    <h1>Contacts</h1>
    <button class="button button-positive button-block" ng-click="contacts_ctrl.fetchContacts()">Fetch Contacts</button>
    <ul class="list">
        <li class="item" ng-repeat="contact in contacts_ctrl.contacts">{{ contact.displayName }}</li>
    </ul>

  </ion-content>
</ion-view>

这是我的主要 index.html 文件，其中 link 我需要的所有文件：

不太确定我做错了什么。我已经尝试了一些替代方法，例如在 app.js 文件中包含 ngCordova：

angular.module('app', ['ionic', 'ngCordova', 'app.controllers'])

并使用我上面为联系人控制器编写的相同代码。

我也试过把它放在主 App Controller 中，但它也不起作用：

(function(){
    angular.module('app.controllers', ['ngCordova'])

将其放入联系人控制器也不起作用：

(function(){
    angular.module('app.controllers', ['ngCordova'])

唯一似乎有效的是当我将控制器放入 app.js 文件时：

angular.module('app', ['ionic', 'app.controllers'])
.controller(function($scope, $cordovaContacts){

  //same code as Contacts Controller above

});

但问题是我不太喜欢这样做。有什么想法吗？

Answer 1

您在 app.js 中添加 app.controllers 的代码有效，因为您正在创建一个名为 app.controllers 的模块，为了使用它，您必须在 app.js。如果您替换此代码

 angular.module('app.controllers')
.controller('ContactsController', ['$scope', ContactsController]);

和

 angular.module('app')
.controller('ContactsController', ['$scope', ContactsController]);

它应该在不引用 app.controllers 的情况下工作。否则你应该引用你的模块。

Answer 2

问题是我没有在我的控制器中传递 $cordovaContacts。所以不是这个：

(function(){
    angular.module('app.controllers')
    .controller('ContactsController', ['$scope', ContactsController]);

    function ContactsController($scope, $cordovaContacts){


    };
})();

应该是这样的：

(function(){
    angular.module('app.controllers')
    .controller('ContactsController', ['$scope', '$cordovaContacts', ContactsController]);

    function ContactsController($scope, $cordovaContacts){



    };
})();

从单独的文件使用它时，cordova 联系人无法正常工作

cordova contacts not working when using it from a separate file

angularjs

cordova

ionic