17

在我的 AngularJS 应用程序中，我正在执行以下操作

$http.get('/plugin/' + key + '/js').success(function (data) {
    if (data.length > 0) {
        console.log(data);
        // Here I would also need the value of 'key'
    }
});

现在我需要访问key成功回调中的值，即我需要知道在get()发出请求时它具有哪个值。

任何“最佳实践”如何做到这一点？

PS：我可以执行以下操作，但是有更好的方法吗？

var key = config.url.split('/')[2];
4

5 回答 5

23

解决方案1：

$scope.key = key;
$http.get('/plugin/' + key + '/js').success(function (data) {
    if (data.length > 0) {
        console.log(data, $scope.key);
    }
});

解决方案 2（根据 Jim Hong 在他的回答中的观察更新）：

$http.get('/plugin/' + key + '/js').success((function(key) {
    return function(data) {
        console.log(key, data);
    }
})(key));
于 2013-10-01T14:35:45.900 回答
13

参考@geniuscarrier 我这边的工作解决方案是

$http.get('/plugin/' + key + '/js').success((function(key) {
    return function(data) {
        console.log(key, data);
    }
})(key));

自从使用@geniuscarrier，我会得到

数据未定义错误

.

于 2014-08-06T03:46:48.150 回答
4

从技术上讲，这不是 AngularJS 的问题，而是javascript的一个特性

首先，您在作用域内定义的函数将可以访问其父作用域的局部变量和参数

function parent(arg){
   var local
   function child(){
       // have access to arg and local
   }
}

Scope 实际上适用于父子类比：如果您是父母并且您拥有一个 cookie，那么您当然愿意与您的孩子分享它……但如果您是一个孩子……您的 cookie 就是您的cookie ，你的父母不能碰它:)。换句话说，内部作用域可以访问外部作用域，但它不能双向工作

所以你绝对应该能够做到：

$http.get('/plugin/' + key + '/js').success(function (data) {
    if (data.length > 0) {
        console.log(data, key); //as long as you can pass it to $http.get as an argument
                                //you can access it here
    }
});

其次，由于 javascript 的事件驱动特性，内部函数存储对外部函数变量的引用。你可能听说过这个

javascript中的函数是对象

因此，局部变量和参数是函数的私有成员：

function ObjectA(){ // define a constructor
    var x = 10      // private variable
    changeX : function(){
                  x = 20   // access and MODIFY a variable of parent scope
              }
}

如果你能理解私有变量在 javascript 中是如何工作的，那么你基本上就明白了什么是闭包。因此，对于回调函数，很有可能在它被触发时，父范围变量的值已经改变了。要解决此问题，您可以使用立即调用函数表达式(IIFE)

$http.get('/plugin/' + key + '/js').success((function(currentKeyValue) {
    return function(data) {
        console.log(currentKeyValue, data);
        // again, currentKeyValue is a REFERENCE to outer function's
        // parameter. However, since String is passed by value in javascript
        // currentKeyValue of outer scope is a DIFFERENT string that has the
        // same value as KEY when it is invoked
    }
})(key)); // immediately invoke the function passing the key as a parameter
于 2016-02-19T19:11:33.197 回答
2

与其污染作用域或使 iif 复杂化，另一种更简洁的方法是创建一个回调函数并使用参数调用它；

var myCallBack = function (key) {
  return function (data) {
    if (data.length > 0) {
      console.log(data, key);
    }
  }
}

$http.get('/plugin/' + key + '/js').success(myCallBack(key));
于 2016-04-13T12:33:25.927 回答
2

唷，我一直在寻找这个答案，但它在这里很好。只是为了更新它，因为遗留的 promise 方法已经被弃用，我们应该使用标准success方法。errorthen

@geniuscarrier 和 @jim-horng 答案中的解决方案 2 可以这样重写：

$http.get('/plugin/' + key + '/js').then(
    (function(key) {
        return function(data) {
            console.log(key, data);
        }
    })(key),
    function(data) {
        //error handle
    });
于 2016-04-15T14:39:29.590 回答