成功 callbackId 中的错误 ... ReferenceError：找不到变量：$http答案

【问题标题】：Error in Success callbackId ... ReferenceError: Can't find variable: $http成功 callbackId 中的错误 ... ReferenceError：找不到变量：$http
【发布时间】：2015-01-09 23:05:53
【问题描述】：

我正在尝试使用离子（角度）构建一个混合移动应用程序。对于这个应用程序，我正在进行一个依赖于 jQuery 的 oAuth 调用，因此加载了两个库，以及 oAuth 和我和我的应用程序的脚本。

<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/auth.js"></script>
<script src="js/app.js"></script>

发起认证的调用是在app.js中的ionic ready事件中完成的，如下所示：

$ionicPlatform.ready(function(){
  oAuthProcess.authorize({
    client_id: 'client',
    client_secret: 'secret',
    scope: 'scope',
    redirect_uri: 'fake url'
  }).done(function(data){
    localStorage.setItem('accessToken', data.access_token);
    localStorage.setItem('refreshToken', data.refresh_token);
    var accessToken = localStorage.getItem("accessToken");
    alert(accessToken);
  }).fail(function(data){alert(data.error);});
});

oAuthProcess 函数位于 auth.js 文件中，如下所示。它会打开 inAppBrowser 以执行身份验证，然后应将其关闭，然后将访问令牌返回给应用程序以允许调用 API：

var oAuthProcess = {
  authorize: function(options) {
    var deferred = $.Deferred();
    var authUrl = 'some url' + $.param({
    client_id: options.client_id,
    redirect_uri: options.redirect_uri,
    response_type: 'code',
    scope: options.scope
  });
  //Open inAppBrowser with authUrl
  var authWindow = window.open(authUrl, '_blank', 'location=no,toolbar=no');
  authWindow.addEventListener('loadstart', function(e) {
    var url = '' + e.url + '';
    //Upon opening in                   
    var code = url.match(/\?code=(.+)$/);
    var error = url.match(/\?error=(.+)$/);
    if (code != null || error != null) {
      authWindow.close();
    }
    if (code) {
      $http({
        method: 'POST',
        url: 'some url',
        data: {code: code[1], client_id: options.client_id, client_secret: options.client_secret, redirect_uri: options.redirect_uri, grant_type: 'authorization_code'}
      }).success(function(data) {
        deferred.resolve(data);
      }).error(function(data){
        deferred.reject(response.responseJSON);
      });
    } else if (error) {
      deferred.reject({
        error: error[1]
      });
    }
  });
  return deferred.promise();
}

};

应用程序能够加载 inAppBrowser 并创建令牌，但是会给出以下错误，这会在关闭 inAppBrowser 后阻止令牌返回应用程序。

2015-01-09 16:48:04.299 myApp[2146:483400] 成功 callbackId 错误：InAppBrowser85303841：ReferenceError：找不到变量：$http

任何帮助解决此问题或替代方法将不胜感激。

提前致谢。

【问题讨论】：

$http 不是在全局对象上公开的东西。您需要使用依赖注入来访问它。如果您在全局上下文中执行此操作，则需要从 $injector 访问 $http。
@PSL 感谢您的快速回复。您能否进一步解释一下，我该怎么做？我对角度很陌生
你可以通过var $http = angular.injector(['ng']).get('$http')获取http实例，前提是你已经加载了角度。我也不明白从匿名事件处理程序返回承诺的意义何在。
@PSL 我继承了 auth.js 代码，并且在 js 中的进步不足以自己重写或创建它。怎样才能做到最好？
将该行代码添加到 auth.js 文件的第一行

标签： angularjs http oauth inappbrowser ionic

【解决方案1】：

我将在此处输入，以便向您展示代码示例而不是评论...

假设您提供的示例是您的整个 auth.js 文件，请添加 PSL 提供的示例，因此文件现在如下所示：

var $http = angular.injector(['ng']).get('$http');
var oAuthProcess = {
  authorize: function(options) {
    var deferred = $.Deferred();
    var authUrl = 'some url' + $.param({
    client_id: options.client_id,
    redirect_uri: options.redirect_uri,
    response_type: 'code',
    scope: options.scope
  });
  //Open inAppBrowser with authUrl
  var authWindow = window.open(authUrl, '_blank', 'location=no,toolbar=no');
  authWindow.addEventListener('loadstart', function(e) {
    var url = '' + e.url + '';
    //Upon opening in                   
    var code = url.match(/\?code=(.+)$/);
    var error = url.match(/\?error=(.+)$/);
    if (code != null || error != null) {
      authWindow.close();
    }
    if (code) {
      $http({
        method: 'POST',
        url: 'some url',
        data: {code: code[1], client_id: options.client_id, client_secret: options.client_secret, redirect_uri: options.redirect_uri, grant_type: 'authorization_code'}
      }).success(function(data) {
        deferred.resolve(data);
      }).error(function(data){
        deferred.reject(response.responseJSON);
      });
    } else if (error) {
      deferred.reject({
        error: error[1]
      });
    }
  });
  return deferred.promise();
}

【讨论】：