AngularJS how to update view/scope after event listener

Question

I have on my controller and service like this (both on separate file):

.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;
}])

So, I'm not sure how to update $scope.myID (which is a textbox). I'm not sure how to do the callback after event listener.. usually if ajax I can use .then to wait for the data to arrive.

Main thing is, I need to use 3rd party library (proprietary), and based on the guide is, to call thirdPartyLib.initialize() after device ready, then check if that thirdPartyLib.isReady() before actually calling the function to retrive the id.

lyjackal · Accepted Answer · 2015-05-27 03:44:00Z

You can't directly assign to $scope.myID until your service is ready. You need to somehow provide a callback that will assign the correct value to your $scope model. You could do this either by making the service return a Promise somewhere that resolves when it's ready, or by emitting an event from the service. I'll give an example of the last option. Depending on how much this thirdPartyLib is integrated with angular your may need to kick angular to get the scope to apply properly. Here I use $scope.$evalAsync. You could also return a promise that will resolve with the id rather than passing a callback directly in order to .then like you would with an ajax library.

Also, if the thirdPartyLib is particularly sucky, and it's initialize is asynchronous, and it doesn't provide you any callback/promise/event driven indicator that it's ready, you may need to

.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;
  }
])

Collectives™ on Stack Overflow

AngularJS how to update view/scope after event listener

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related