AngularJS 如何在事件侦听器后更新 view/scope

Question

我的控制器和服务是这样的（都在单独的文件中）：

.controller('authCtrl',['$scope','MyConnect',function($scope,MyConnect){
        /***************Testing Area******************/
        console.log("connecting");
        MyConnect.initialize();
        $scope.myID = ??? //I want this to be updated
}


.factory('MyConnect', ['$q', function($q) {
    var miconnect = {
        initialize: function() {        
            this.bindEvents();
        },

        bindEvents: function() {
            document.addEventListener('deviceready', this.onDeviceReady, false);            
        },

        onDeviceReady: function() {
            thirdPartyLib.initialize();
            miconnect.applyConfig();
        },     

        applyConfig: function() {
              if (thirdPartyLib.isReady()) {
                    //I want in here to update $scope.myID in controller and reflect the changes in UI textbox
                    //$scope.myID = thirdPartyLib.id(); //something like this will be good
              }
              else {
              }
        }
    }

    return miconnect;
}])

所以，我不确定如何更新 $scope.myID（这是一个文本框）。我不确定如何在事件侦听器之后进行回调。通常 if ajax 我可以使用 .then 来等待数据到达。

主要是，我需要使用第 3 方库（专有），根据指南，在设备准备好后调用 thirdPartyLib.initialize()，然后检查 thirdPartyLib.isReady( ) 在实际调用函数以检索 id 之前。

Answer 1

在您的服务准备好之前，您不能直接分配给 $scope.myID。您需要以某种方式提供一个回调，将正确的值分配给您的 $scope 模型。您可以通过使服务 return 在某处成为准备就绪时解析的 Promise，或者通过从服务发出事件来实现。我将给出最后一个选项的示例。根据此 thirdPartyLib 与 angular 集成的程度，您可能需要启动 angular 才能正确应用范围。这里我使用$scope.$evalAsync。您还可以 return 一个将通过 id 解析的承诺，而不是像使用 ajax 库那样直接传递回调以便 .then。

此外，如果 thirdPartyLib 特别糟糕，它的初始化是异步的，并且它没有为您提供任何 callback/promise/event 驱动指示器表明它已准备就绪，您可能需要

.controller('authCtrl', ['$scope', 'MyConnect',
  function($scope, MyConnect) {
    console.log("connecting");
    // my connect should probably just `initialize()` on it's own when it's created rather than relying on the controller to kick it.
    MyConnect.initialize();
    MyConnect.whenID(function(id) {
      // $evalAsync will apply later in the current $digest cycle, or make a new one if necessary
      $scope.$evalAsync(function(){
        $scope.myID = id;
      });
    })
  }
])

.factory('MyConnect', ['$q', '$rootScope'

  function($q, $rootScope) {
    var miconnect = {
      ...,

      onDeviceReady: function() {
        thirdPartyLib.initialize();
        miconnect.applyConfig();
        /* Also, if the `thirdPartyLib` is particularly sucky, AND if it's initialize is asynchronous, 
         * AND it doesn't provide any callback/promise/event driven indicator that it's ready, 
         * you may need to hack some kind of `setTimeout` to check for when it is actually `isReady`. */


        // ok, listeners can do stuff with our data
        $rootScope.$emit('MyConnect.ready');
      },

      whenID: function(callback) {
        if (thirdPartyLib.isReady()) {
          callback(thirdPartyLib.id);
        } else {
          var unregister = $rootScope.$on('MyConnect.ready', function() {
            // unregister the event listener so it doesn't keep triggering the callback
            unregister();
            callback(thirdPartyLib.id);

          });
        }
      }
    }

    return miconnect;
  }
])

AngularJS 如何在事件侦听器后更新 view/scope

AngularJS how to update view/scope after event listener

javascript

callback

listener

angularjs

cordova