Integrating non-Angular code?

Question

I'm developing a Cordova/PhoneGap app, and I'm using the $cordovaPush plugin (wrapped for PushPlugin) to handle push notifications.

The code looks something like this:

var androidConfig = {
                    "senderID" : "mysenderID",
                    "ecb"      : "onNotification"
                }

                $cordovaPush.register(androidConfig).then(function(result) {
                    console.log('Cordova Push Reg Success');
                    console.log(result);            
                }, function(error) {
                    console.log('Cordova push reg error');
                    console.log(error);
                });

The "ecb" function must be defined with window scope, ie:

window.onNotification = function onNotification(e)...

This function handles incoming events. I'd obviously like to handle incoming events in my angular code - how can I integrate the two so that my onNotification function can access my scope/rootScope variables?

Michael Hays · Accepted Answer · 2015-04-23 16:43:25Z

Usually, you'll wrap your 3rd party library in a service or a factory, but in the spirit of answering your particular scenario...

Here's one possibility:

angular.module('myApp').
   controller('myController', function($scope, $window) {
     $window.onNotification = function() {
       $scope.apply(function() {
         $scope.myVar = ...updates...
       });
     };
   });

A couple of things to notice:

Try to use $window, not window. It's a good habit to get into as it will help you with testability down the line. Because of the internals of Cordova, you might actually need to use window, but I doubt it.
The function that does all of the work is buried inside of $scope.apply. If you forget to do this, then any variables you update will not be reflected in the view until the digest cycle runs again (if ever).
Although I put my example in a controller, you might put yours inside of a handler. If its an angular handler (ng-click, for example), you might think that because the ng-click has an implicit $apply wrapping the callback, your onNotification function is not called at that time, so you still need to do the $apply, as above.
...seriously... don't forget the apply. :-) When I'm debugging people's code, it's the number one reason why external libraries are not working. We all get bit at least once by this.

Shashank Agrawal · Accepted Answer · 2015-04-23 16:40:29Z

0

Define a kind of a mail controller in body and inside that controller use the $window service.

HTML:

<body ng-controller="MainController">
     <!-- other markup .-->
</body>

JS:

yourApp.controller("BaseController", ["$scope", "$window", function($scope, $window) {

    $window.onNotification = function(e) {
        // Use $scope or any Angular stuff
    }
}]);

answered Apr 23, 2015 at 16:40

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

Collectives™ on Stack Overflow

Integrating non-Angular code?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related