Angularjs 在资源获取中将当前选项卡url传递给服务器_Angularjs_Google Chrome Extension

Angularjs 在资源获取中将当前选项卡url传递给服务器

angularjs google-chrome-extension

Angularjs 在资源获取中将当前选项卡url传递给服务器,angularjs,google-chrome-extension,Angularjs,Google Chrome Extension,我正在尝试将当前选项卡url发送到资源服务{in param}。但是，全球tablUrl目前没有任何价值 var url=“http://[localhost]/getProfile？domain=“+tabUrl” 但在以下位置获取日志： console.log(tabUrl); 这是我的代码： var tabUrl; angular.module('jsonService', ['ngResource']) .factory('JsonService', function($resour

我正在尝试将当前选项卡url发送到资源服务{in param}。但是，全球tablUrl目前没有任何价值 var url=“http://[localhost]/getProfile？domain=“+tabUrl”

但在以下位置获取日志：

console.log(tabUrl);

这是我的代码：

var tabUrl;
angular.module('jsonService', ['ngResource'])
.factory('JsonService', function($resource) {
        chrome.tabs.getSelected(null, function(tab) {
        tabUrl = tab.url;
        console.log(tabUrl);
    });
    var url = "http://[localhost]/getProfile?domain="+tabUrl
  return $resource(url,{}, {
    list : {
      method : 'GET',
     cache : true
    }
 });
});

模板绑定：

  <body ng-controller="extensionCtrl">

第一: 请不要使用不推荐的chrome.tabs.getSelected。改用

第二：

chrome.tabs.getSelected

chrome.tabs.query

是异步的。这意味着当它们在后台执行某些工作时，执行将继续，并且在完成这些工作时调用指定的回调。
因此，在这种情况下：

line 1: chrome.tabs.getSelected(null, funkyCallback);
line 2: var url = ...
line 3: return $resource(...);

…一个可能（且非常可能）的执行顺序是：

1. chrome.tabs.getSelected (starts retrieving the active tab in the background)
2. line 2 gets executed (at this time 'tabURL' is not set yet)
3. line 3 gets executed (returning something)
4. Once the the active tab is retrieved, 'funkyCallback' is called
   (setting 'tabURL' after it is too late).

当使用异步API（如大多数chrome.*API）时，您必须更改脚本的整个逻辑，以符合API调用的异步性质

例如，您可以获得如下相同的结果：

HTML:

<html ng-app="jsonService">
    ...
    <body ng-controller="extensionCtrl">
        <p>{{jsonData}}</p>
        ...

var app = angular.module("jsonService", ["ngResource"]);

app.factory("JsonFactory", function($resource) {
    var url = "http://localhost/getProfile?domain=:tabUrl";
    var retObj = $resource(url, {}, {
        list: {
            method: "GET",
            cache: true
        }
    });
    return retObj;
});

app.controller("extensionCtrl", function($q, $rootScope, JsonFactory) {
    chrome.tabs.query({ active: true }, function(tabs) {
        JsonFactory.list({ tabUrl: tabs[0].url }, function(data) {
            // On success...
            $rootScope.jsonData = data;
        }, function(data) {
            // On error...
            $rootScope.jsonData = "Error using JsonFactory.list(...) !";
        });
    });
});

另请参见此执行类似异步操作的var url=“”；如何测试这条线。。我签入的db tabUrl将变为空白。$scope.url=tab.url；执行此操作并通过{{url}}模板进行检查不会显示任何内容。更新了答案（再次）！chrome.tabs.query回调的参数出错：它返回一个选项卡对象数组，因此

Tab.url

实际上应该是

tabs[0]。url

。

var app = angular.module("jsonService", ["ngResource"]);

app.factory("JsonFactory", function($resource) {
    var url = "http://localhost/getProfile?domain=:tabUrl";
    var retObj = $resource(url, {}, {
        list: {
            method: "GET",
            cache: true
        }
    });
    return retObj;
});

app.controller("extensionCtrl", function($q, $rootScope, JsonFactory) {
    chrome.tabs.query({ active: true }, function(tabs) {
        JsonFactory.list({ tabUrl: tabs[0].url }, function(data) {
            // On success...
            $rootScope.jsonData = data;
        }, function(data) {
            // On error...
            $rootScope.jsonData = "Error using JsonFactory.list(...) !";
        });
    });
});