Triggering angular from third party initialisation

Question

I'm new to angular, no problems with a simple angular apps, but now I want to integrate with a third party component. I can think of a few kluges to achieve what I'm trying to do, but I'd prefer to use a clean solution to the general requirement: how to call angular code from "outside" angular?

I want my angular application to initialise a splash view, then wait for the third-party software to initialise and then have angular show the main view. The third-party software initialises via various asynchronous calls, and might take a second or two, or in extreme cases longer. It provides a call-back function that will be called when it's ready.

So right now to simulate the effect I have got:

.controller('MySplash', ['$scope', '$location', '$q', 
                             function($scope, $location, $q) {   

      $scope.waitForInit = $q.defer();

      $scope.waitForInit.promise.then(function() {
          $location.path('/tab/MyMainView');
      });

      $scope.waitForInit.resolve();  // fake the post-init triggering
    }])

So this shows the splash screen and when the deferred is satisfied shows the main screen, in this case of course it happens immediately.

I also have a function provided by the third-party software

 CalledWhenThirdPartyReady() {
      // put some code here
 }

And in concept all I want to do is move that resolve call into this callback

 CalledWhenThirdPartyReady() {
       $scope.waitForInit.resolve();
 }

Fundamentally, my puzzle is how to get some code that is effectively stand-alone have access to DI. In concept all I want to do is call an angular service, or access an angular variable. I've tried this kind of thing

 CalledWhenThirdPartyReady() {

      angular.module('myApp')

   .run(["$rootScope", "$location",
              function ($rootScope, $location) {
                // just to show access to DI-ed variables
                console.log("Run in module", $rootScope, ",", $location);

            }] );
 }

Thinking that the run method would be called and I'd have access to the injected variables, but run never gets triggered I guess because I'm registering the run() too late.

tasseKATT · Answer 1 · 2014-02-16T11:38:25.193

1

Try using $apply:

$apply() is used to execute an expression in angular from outside of the angular framework. (For example from browser DOM events, setTimeout, XHR or third party libraries). Because we are calling into the angular framework we need to perform proper scope life cycle of exception handling, executing watches.

For example:

CalledWhenThirdPartyReady() {
    $scope.$apply($scope.waitForInit.resolve());  
}

This requires that CalledWhenThirdPartyReady has access to the $scope, for example if it's defined inside your controller. If you need CalledWhenThirdPartyReady to be defined outside of your Angular application you need to handle it in some other way.

Example to call a function in a controller from the outside:

JS:

var app = angular.module('myApp', []);

app.controller('MySplash', ['$scope', '$location', '$q',
  function($scope, $location, $q) {

    $scope.waitForInit = $q.defer();

    $scope.waitForInit.promise.then(function() {
      console.log('Resolved.');
    });

    $scope.resolve = function () {
       $scope.waitForInit.resolve();
    }
  }
]);

Html:

<body ng-controller="MySplash">
</body>

<script type="text/javascript">
  window.onload = function() {

    console.log('Loading.');
    window.setTimeout(function () {
      var controllerScope = angular.element(document.querySelector('body')).scope();
      controllerScope.resolve();
    }, 1000);
  }
</script>

edited Feb 16 '14 at 11:38

answered Feb 16 '14 at 09:28

tasseKATT

38,470
8
84
65

1

Thanks, in concept that's exactly what I want to do. Problem is that I don't seem to have access to the variable $scope. I have tried your code and $scope is not a known variable. In my limited understanding I would expect to need to inject it, and I don't know how to do that in "outside" code. – djna Feb 16 '14 at 10:54
Can you move the CalledWhenThirdPartyReady() and make the calls to the third party from inside your controller? – tasseKATT Feb 16 '14 at 11:10
No, that's the problem. The third party code is initiated by loading its JavaScript file, it promises to call back to the global CalledWhenThirdPartyReady() function when it has initialsed. So I don't have control from "inside" angular. – djna Feb 16 '14 at 11:32
I see. I updated my answer with another example. Just let me know if it doesn't suit your needs and I will try to help. For example if you aren't using an element with ng-controller. – tasseKATT Feb 16 '14 at 11:39
I can see how something like this could work. As it happens I'm not using ng-controller, using ng-app only. I assume that I probably can do something similar to your code, the thing that concerns me is that we're not using angular's APIs, are we effectively peaking into the data structures set up by Angular? I'll give it a try, but if anything using the APIs comes to mind I'd appreciate it. – djna Feb 16 '14 at 12:27
Don't think there is an API for this. Here are some more examples: http://stackoverflow.com/questions/10490570/call-angular-js-from-legacy-code/10508731#10508731 – tasseKATT Feb 16 '14 at 12:33

score 1 · Answer 2 · answered Feb 16 '14 at 12:53

The link given by tasseKATT above gives the general principle for external interactions, in particular the looking up of angular entry points via the DOM.

In the end I took the approach of adding an attribute to a module, effectively using the module as scratchpad for communicating between parts of my app. (I guess slightly better than using a global.)

in my controller module:

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


.controller('PetSplashCtrl', ['$scope', '$location', '$q', 
                         function($scope, $location, $q) {   

  var initDeferred = $q.defer();
  angular.module('starter.controllers').initDeferred = initDeferred;

  initDeferred.promise.then(function() {
      $location.path('/tab/pets');
  });

}]);

and in the third-party callback added

angular.module('starter.controllers').initDeferred.resolve();

There is a race condition between angular and the thirdPartyCode, so I needed to check that angular was ready and the Promise was set up before calling resolve():

function thirdPartyCallback(){

var initWaiter = function(){

    if ( typeof angular !== 'undefined' 
              && angular.module('starter.controllers') 
              && angular.module('starter.controllers').initDeferred
       ){
        angular.module('starter.controllers').initDeferred.resolve();
        console.log("init done");

    } else {
        console.log("init wait");
        setTimeout(initWaiter, 1000);
    }               
};

initWaiter();

}

I'm not sure whether looking-up a service via the DOM would be better than this.

Triggering angular from third party initialisation

2 Answers2