javascript - 在服务中保存值后 undefined variable (AngularJS)

Question

我正在使用 Cordova 编写一个电话簿应用程序，因此使用 AngularJs 来实现逻辑。我正在使用此服务连接到服务器(它是扩散推送服务器)并发送/接收带有数据的消息。

angular.module('directory.services', [])

.service('EmployeeService', function() {
    var clientSession;
    var employees = [];

    this.initConnection = function() {
        diffusion.connect({
            host : 'localhost',
            port : 8080,
            secure : false,
            principal : 'admin',
            credentials : 'password'
         }).then(function(session) {
             clientSession = session;
            session.on({
                [...] // Lots of session listerners
            });
           var subscription = session.subscribe('Company/Test');
           var stream = session.messages.listen('Company/Test');

           stream.on('message', function(message) {
               //Called when a message is recieved
                employees = JSON.parse(message.content);
                console.log(employees);
               // log shows me the data fine here
           });
        });
    }        

    this.sendMessage = function(content){
        clientSession.messages.send('Company/Test', content);
    }

    this.clearResult = function(){
        employees= []; 
    }
});

Controller :

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

.controller('empListCtrl', function ($scope, $ionicPlatform, EmployeeService) {
    $scope.employees = EmployeeService.employees;
    $scope.searchKey = "";

    $scope.clearSearch = function () {
        // console.log() gives "undefined" for both variables here
        $scope.searchKey = "";
        EmployeeService.clearResult();            
    }

    $scope.search = function () {
        EmployeeService.sendMessage($scope.searchKey);
    }

    EmployeeService.initConnection();   
});

问题:我从服务器流中获取值，并将其保存在我的服务变量中。但是当我从 Controller 调用clearSearch()时，两个员工变量在范围和服务中都未定义。

我知道链接可能有错误，但至少服务不应该仍然有数据吗？

我尝试使用带有嵌套数组的对象进行链接，并尝试在 Controller 中使用 watch。两者都不起作用。

有什么想法吗？

Answer 1

我首先看到的是 varEmployees = []; 没有绑定(bind)到任何东西。那么你怎么能期望通过EmployeeService.employees访问它呢？

第二件事是您的服务不会返回任何内容。如果你看documentation您可以看到注入(inject)到 Controller 的服务采用从服务返回的值。

这通常是构建服务的方式:

angular.module('app', []).service('helloService', function() {
  var Service = function() { /* INIT CODE HERE */ };

  Service.prototype.sayHello = function() {
    console.log('hello, world;')
  };

  return new Service();
})

你还可以返回一个对象文字、一个字符串、一个函数，几乎任何东西，但重点是你要返回一些东西。您只需将其方法绑定(bind)到 this。

第三件事是 EmployeeService.initConnection() 是一个异步调用，不能保证在您调用 sendMessage() 时连接已初始化。这没问题，但您需要确保在触发任一服务方法时连接已准备就绪。您可以通过阻止交互直到 promise 得到解决来做到这一点。

// controller template scope
<button ng-click="sendMessage()" ng-disabled="connecting">Send Message</button>

// controller
$scope.connecting = true;
EmployeeService.initConnection().then(function() {
   $scope.connecting = false;
});

// service
.service('EmployeeService', ['$q', function() {
  var clientSession;
  var employees = [];
  var service = {}

  service.initConnection = function() {
    var defer = $q.defer();

    // do this in connection success callback
    defer.resolve();

    // do this if the connection fails
    dewfer.reject();

    return defer.promise;  
  }

  return service;
}]);

这就是我能提供的所有建议，直到您给出更具体的建议为止。

<小时/>

编辑:您可以像这样监视您的服务的更新:

$scope.watch(
  function() { return service.currentResult() },
  function(employees) {
    $scope.employees = employees;
  }
);

这将始终使 $scope.employees 在每个摘要周期中保持最新状态。