CODEWITHSUNDEEP
cordovaoauth-2.0angularjs-scopeinappbrowsercordova-plugins
Vine Brancho
Vine Brancho

Reputation: 11

Why Angular.js variables not accessible in Cordova InAppBrowser's executeScript callback

I am developing hybrid app based on angular.js using cordova. I have faced the problem not accessing to angular variables $ (like $rootScope) after executing the followings.

  1. cordova and angular.js finished to be initialized as soon as this hybrid app is launched.

  2. When user click specific button for social login, the following loginTwitterAccount $scope function is called.

  3. loginTwitterAccount opens new window using 'InAppBrowser' cordova plugin to load external authorization page, not local. This authorization is 'Authorization Code' grant type. So if user grants accesses on my hybrid app in opened window, my backend server exchanges access token with twitter server, and then sends access token from twitter server to opened window of my hybrid app. 

    app.controller('LoginCtrl', function($scope, $rootScope) {
...
  $scope.loginTwitterAccount = function () {
    var ref = $window.open('/auth/login/twitter', '_blank', 'location=yes,toolbar=yes');    
    ref.addEventListener('loadstop', function(event) {
        if (event.url.match('/auth/login/twitter/callback/success')) {
            // content of this url includes access token data explained above.
            // so app can get the data as calling executeScript like the following
            if (event.url.match(successUrl)) {
                ref.executeScript({
                    code: 'getResult();'
                }, function (values) {
                    // I checked values[0].data has correct value that I want.
                    // At the other place, $rootscope.$on for 'social-login' is already registered.
                    $rootscope.$emit('social-login', values[0].data);
                    ref.close();
                });
             }
        }
    });
  };
});

The problem is that $rootscope.$emit doesn't work, as well as other angular's variable with $ like $scope doesn't work. I don't know why this happens in the use of cordova and angular.js. Is there any missing points in this case? Thanks in advance.

Upvotes: 1

Views: 843

Answers (1)

Vine Brancho
Vine Brancho

Reputation: 11

I found the problem above because $rootScope.$emit is called outside angular.js world. To solve the problem, I should wrap $rootScope.$emit with $rootScope.$apply like the following.

        ...
        if (event.url.match(successUrl)) {
            ref.executeScript({
                code: 'getResult();'
            }, function (values) {
                // I checked values[0].data has correct value that I want.
                // At the other place, $rootscope.$on for 'social-login' is already registered.
                $rootScope.$apply(function () {
                    $rootScope.$emit('social-login', values[0].data);
                }
                ref.close();
            });
         }
         ...

You can find $apply more detail in the following links.

How do I use $scope.$watch and $scope.$apply in AngularJS?

http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

Upvotes: 0

Related Questions