如何改变绑定到事件侦听器的变量？

Question

我是一个贸易红宝石开发和新的角度。我一直在遵循许多指南，但我希望在解决这个问题上有任何帮助。我理解角有一个延迟加载的想法，但我不确定它如何与我的场景相适应。我正在制作的应用程序由一个登录屏幕组成，它向服务器发布您的凭据。服务器使用一个jwt签名令牌进行响应，用于套接字连接。

为了简单起见，我有两个控制器，LoginCtrl和HomeCtrl。我有一家叫signaling的工厂

下面是HomeCtrl的样子：

angular.module('myApp')

.controller('HomeCtrl',function($scope, $state, $ionicPopup, $http, config, signaling){

  $scope.homeDo = function () {
    signaling.socket.emit("ping","nothing")

  };
  signaling.socket.on("pong", function(m){
    console.log("it worked!");
  })

});

现在，signaling使用socketFactory创建一个套接字。我的问题首先从以下几个方面开始:我希望创建用户的套接字连接，使用他们通过发送到服务器时收到的令牌。如何在运行时使用令牌创建套接字连接。以下是信号工厂代码：

angular.module('myApp')

.factory('signaling', function(socketFactory,$localStorage, config, $state,$ionicPopup) {

  this.token = {};
  this.socket = socketFactory({ioSocket: io.connect(config.api+'/?token=' + this.token, { 'forceNew': true})})

  return this;
  }
});

如您所见，当应用程序第一次运行时，没有设置信令的令牌。套接字尝试使用未定义的令牌参数连接。我不想要这个。我希望显式地为工厂设置令牌，然后只在成功登录后才创建套接字。

以下是我的LoginCtrl代码：

angular.module('myApp')

.controller('LoginCtrl',function($scope, $state, $ionicPopup, $http, config, socketFactory, signaling, $localStorage){
 $scope.data = {};
 $scope.login = function () {
    $http.post(config.api+'/login',{
    username: $scope.data.username,
    password: $scope.data.password})
    .success(function(data, status, headers) {
      signaling.token = data.token;
      signaling.socket = socketFactory({ioSocket: io.connect(config.api+'/?token=' + data.token, { 'forceNew': true})})
      $state.go('app.home');
     })
    .error(function(data, status, headers, config) {
        $state.go('app.login');
    });
  };    
});

现在，假设我在登录后执行了成功的回调，并得到了令牌。signaling.socket现在是我想要使用的正确的套接字，但是现在所有的偶数侦听器都没有设置来监听它。例如，在前面的HomeCtrl代码中，我有侦听器：

signaling.socket.on("pong", function(m){
  console.log("it worked!");
})

如果服务器发出“乒乓”，代码将不会执行，因为我怀疑当应用程序第一次运行时。signaling.socket是用未定义的令牌创建的套接字。我已经通过手动添加正确的令牌来验证这一点。

我知道我可能应该回去看看书，多读一些关于角度的东西，但是我就是不能让我的头绕着它转。

TL;DR -我有一个对象(信令)，它有一个实例变量socket，我想在运行时将socket变量设置为非运行时的东西，但是在运行时，我在空signaling.socket上注册事件侦听器。我想要么重新注册事件，要么在运行时不运行HomeCtrl。

无论如何，我知道那是一个巨大的文本块，如果有任何善良的灵魂愿意阅读这篇文章，我会非常感激！

Answer 1

即使不能在运行时运行HomeCtrl，也可以将signaling.socket添加到HomeCtrl范围的监视列表中，并监视其变化，如下所示

$scope.$watch('signaling.socket', function(socket) {
  if (socket) {
    socket.on("pong", function(m){
      console.log("it worked!");
    });
  }
});

这样，当您在LoginCtrl中创建一个带有令牌的新套接字时，HomeCtrl将捕获此更改并将处理程序pong绑定到新创建的套接字。

如果除非用户登录，否则不允许他们查看主页，那么有一个更好的解决方案。

app.run(function ($rootScope, $state, signaling) {
  $rootScope.$on('$stateChangeStart',
    function (event, toState, toParams, fromState, fromParams) {
      if (toState === 'home' && !!signaling.token) {
        event.preventDefault();
        $state.go('login');
      }
      $state.go(toState.name, toParams);
    }
}

然后，只有在令牌存在之后才会初始化HomeCtrl，并且只可以创建一次signaling.socket。