为什么Angular.js变量在科尔多瓦InAppBrowser的executeScript回调无法访问 [英] Why Angular.js variables not accessible in Cordova InAppBrowser's executeScript callback

问题描述

我正在开发基于使用科尔多瓦angular.js混合应用程序。我已经在执行以下后不面对以访问变量角度 $ （如$ rootScope）的问题。

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. 科尔多瓦和angular.js完成以尽快这种混合应用启动初始化。



2. 当用户点击登录社交特定按钮，出现如下 loginTwitterAccount $范围函数被调用。

loginTwitterAccount 打开使用'InAppBrowser'科尔多瓦插件加载外部授权网页，而不是当地的新窗口。这种授权是授权code交付式。因此，如果用户访问授予在打开的窗口中我的混合应用程序，我的后台服务器交换访问令牌与Twitter服务器，然后发送访问令牌从Twitter服务器到我的混合应用程序打开的窗口。

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();
                });
             }
        }
    });
  };
});

问题是， $ rootscope。$发出不工作，以及其它角度与 $ 如 $范围不起作用。我不知道为什么会这样，在使用科尔多瓦和angular.js的。有没有在这种情况下，任何失分？先谢谢了。

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.

推荐答案

我发现上面的问题，因为 $ rootScope。$发射出被称为angular.js世界之外。为了解决这个问题，我应该换 $ rootScope。$发出与 $ rootScope。$适用如下所示。

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.

使用范围。$手表和范围。$申请

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

这篇关于为什么Angular.js变量在科尔多瓦InAppBrowser的executeScript回调无法访问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！