Question

我正在使用cordova开发基于angular.js的混合应用程序。在执行以下操作后，我遇到了无法访问角度变量$（如$ rootScope）的问题。

cordova和angular.js在这个混合应用程序启动后立即完成初始化。
当用户单击特定按钮进行社交登录时，将调用以下loginTwitterAccount $ scope函数。

loginTwitterAccount使用“InAppBrowser”cordova插件打开新窗口，以加载外部授权页面，而不是本地。此授权是“授权代码”授权类型。因此，如果用户在打开的窗口中授予我的混合应用程序访问权限，我的后端服务器会与twitter服务器交换访问令牌，然后将访问令牌从twitter服务器发送到我的混合应用程序的打开窗口。

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.$emit不起作用，以及$ $scope之类的其他角度变量不起作用。我不知道为什么在使用cordova和angular.js时会发生这种情况。在这种情况下是否有任何缺失点？提前谢谢。

Answer 1

我发现上面的问题是因为$rootScope.$emit在angular.js世界之外被调用。要解决这个问题，我应该将$rootScope.$emit与$rootScope.$apply一起包装，如下所示。

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

您可以在以下链接中找到$ apply更多详细信息。

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

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

为什么在Cordova InAppBrowser的executeScript回调中无法访问Angular.js变量

1 个答案: