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（这是一个文本框）。我不确定如何在事件监听器之后进行回调..通常如果ajax我可以使用.then等待数据到达。

主要的是，我需要使用第三方库（专有），并且基于指南，在设备就绪后调用thirdPartyLib.initialize（），然后在实际调用函数之前检查是否是thirdPartyLib.isReady（）审阅身份。

Answer 1

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

此外，如果thirdPartyLib特别糟糕，并且它的初始化是异步的，并且它没有为您提供任何回调/承诺/事件驱动指示器，它已准备就绪，您可能需要

.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如何在事件监听器之后更新视图/范围

1 个答案: