控制器内的Angular $ http函数范围

Question

我试图在控制器内部使用带有角度函数（特别是$ http.get）的“this”时遇到问题。

示例：

Javascript-（伪代码）

...
.controller('testController')
{
   $http.get(data)
  {
     this.Stuff = data;
  }
}
...

HTML-

<div ng-controller='testController as test'>
{{test.Stuff}}
</div>

当试图访问html中的test.Stuff时，它是空的。

我知道存在范围问题，但是我不能在$ http函数中访问控制器的'this'吗？

Answer 1

您会注意到成功回调中的this是指window（全局对象）。使用window作为上下文调用成功回调，因为使用window对象作为函数的上下文调用不是其他函数成员的函数。如果希望this引用控制器实例，则必须将该上下文绑定到该函数。您可以使用angular.bind来完成此操作。

.controller('testController')
{
   $http.get(data).success(angular.bind(this, function(data) {
     this.Stuff = data;
  }));
}

Answer 2

以这种方式尝试：

controller('testController')
{
   var self = this;

   $http.get(data)
  {
     self.Stuff = data;
  }
}

我通常使用这样的范围：

.controller('testController', function($scope) {
{
   $http.get(data)
  {
     $scope.Stuff = data;
  }
})

Answer 3

将数据分配给http回调中的范围，如下所示：

app.controller('testController',function($scope,$http) {
    $http.get(url).success(function(response) {
        $scope.stuff = response;
    });
});