Question

我正在尝试使用cordova contacts插件。这是我在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']);

然后在Contacts Controller文件中我有：

(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文件，我链接了我需要的所有文件：

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

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

使用上面用于Contacts Controller的相同代码。

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

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

将它放在Contacts Controller中也不起作用：

(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.controllers中添加app.js的代码，因为您正在创建一个名为app.controllers的模块，为了使用它，您必须在{{1}中引用它}}。如果您替换此代码

app.js

带

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

它应该在不引用angular.module('app') .controller('ContactsController', ['$scope', ContactsController]);的情况下工作。否则你应该参考你的模块。

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联系人无法正常工作

2 个答案: