如何将控制器与服务同步

How to sync controller with Service

我正在测试 angular 和 SQLite 的通信。当用户访问页面时,我需要从数据库中获取 selected 公司的 ID 和名称。我正在使用 ion-autcomplete select CRUD 页面中的公司。

服务:sqlite.js


(function () {


'use strict';

  angular
    .module('Test')
    .service('$sqliteService', $sqliteService);

  $sqliteService.$inject = ['$q', '$cordovaSQLite'];
  function $sqliteService($q, $cordovaSQLite) {

    var self = this;
    var _db;

    self.db = function () {
      if (!_db) {
        if (window.sqlitePlugin !== undefined) {
          _db = window.sqlitePlugin.openDatabase({ name: "my.db", location: 2, createFromLocation: 1 });
        } else {
          // For debugging in the browser
          _db = window.openDatabase("my.db", "1", "Database", 200000);
        }
      }
      return _db;
    };

    self.getFirstItem = function (query, parameters) {
      var deferred = $q.defer();
      self.executeSql(query, parameters).then(function (res) {

        if (res.rows.length > 0)
          return deferred.resolve(res.rows.item(0));
        else
          return deferred.reject("There aren't items matching");
      }, function (err) {
        return deferred.reject(err);
      });

      return deferred.promise;
    };
  }
})();

工厂:CompanyService.js

(function () {


'use strict';

  angular
    .module('Test')
    .factory('CompanyService', CompanyService);

  CompanyService.$inject = ['$q', '$sqliteService'];
  function CompanyService($q, $sqliteService) {

    return {      
      getId: function (Id) {

        var query = "Select * FROM Company WHERE ID = ?";
        var values = [Id];

        return $q.when($sqliteService.getFirstItem(query, values));
      }
    };
  }
})();

控制器:CompanyController.js

(function() {
  'use strict';

  angular
    .module('Test')
    .controller('CompanyEditController', CompanyEditController);

  CompanyEditController.$inject = ['$scope', '$q', '$stateParams', '$state', '$cordovaCamera', '$cordovaImagePicker', '$ionicPopup', 'CompanyService'];
  function OcorrenciaEditController($scope, $q, $stateParams , $state, $cordovaCamera, $cordovaImagePicker, $ionicPopup, CompanyService) {

    var vm = $scope;

    vm.modelToItemMethod = function (modelValue) {
      var d = $q.defer();
      CompanyService.getId(modelValue)
        .then(function(data) {
          console.log('My first promise succeeded', JSON.stringify(data));
          $q.resolve(data);
        }, function(error) {
          console.log('My first promise failed', error.message);
        });
      return d.promise;
    };
})();

Company.html

<input ion-autocomplete ng-model="company.IdCompany" type="text" name="fieldEmpresa" placeholder="Empresa" readonly="readonly" class="ion-autocomplete" autocomplete="off" max-selected-items="1" required
                 item-value-key="Id"
                 item-view-value-key="CompanyName"
                 items-method="getTestItems(query)"
                 cancel-label="Cancel"
                 items-removed-method="itemsRemoved()"
                 loader-icon="spinner"
                 external-model="company"
                 model-to-item-method="modelToItemMethod(modelValue)"/>

如果我在 de Factory 和 Service 内部使用,我不明白为什么我需要在控制器内部使用 de“$q.defer”。如果我不使用,控制器无法 return 离子自动完成的值。我错过了什么吗?或者代码是对的?

您正在绑定此方法以自动完成;由于 ajax 调用是异步的,因此您需要 return 一个条件。这就是您最终使用 $q.defer.

的原因

如果你不想使用 $q,那么你可以在你的 VM.modelToItemMethod 中做 return CompanyService.getId(modalValue); 而不是使用 $q.defer ,这反过来 returns 一个延迟对象。