关于javascript：angular.js中的这个vs $ scope？


this vs $scope in angular.js?

本问题已经有最佳答案，请猛点这里访问。

我正在开发一个带有Angular的Rails应用程序，过去我一直使用$scope访问Angular控制器的变量和方法。在codeschool上观看了angular.js课程的成形之后，我意识到使用这个和控制器别名是访问它们的更好方法。

不管怎样，我的应用程序在$scope上运行良好，但是当我切换到"this"实现时，laboratorios var变为空…

我在这里输入了一些代码：HTML：

1
2
3
4
          <tr ng-repeat="laboratorio in labCtrl.laboratorios">
            <td>{{ laboratorio.nombre }}</td>
            <td>{{ laboratorio.razon_social }}</td>
            <td>{{ laboratorio.direccion }}</td>

角度编码：

1
2
3
4
5
6
7
8
9
(function() {
    var app = angular.module('guiaV', []);
    app.controller('LaboratorioController', function( $http) {
      this.laboratorios = [];
      return $http.get('./laboratorios.json').success(function(data) {
        return this.laboratorios = data;
      });
    });
})();

有什么想法吗？

相关讨论

您放入angular.controller中的函数用作构造函数。不返回任何内容的javascript构造函数，隐式返回this。如果一个构造函数返回另一个对象，那么这个对象应该是新对象。例如。：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function Class1() {
    this.prop = 'xxx';
}
var obj1 = new Class1();
console.log(obj1.prop); // prints 'xxx'

function Class2() {
    this.prop = 'xxx';
    return {
        hooray: 'yyy'
    };
}
var obj2 = new Class2();
console.log(obj2.prop); // prints undefined
console.log(obj2.hooray); // prints 'yyy'

您的控制器返回一个HTTP Promise(EDOCX1的返回值〔6〕)，因此Angular认为这个(HTTP Promise)是您的实际控制器(它分配给$scope.labCtrl的对象)。

没时间测试了，希望我没弄错。

这里有一个很小的例子

您在一个闭包内为this.laboratorios赋值。记住，它的作用域与外部作用域是分开的。this适用于完全不同的事物。这就是为什么使用$scope更可靠(如果你问我个人意见，也更可读)。您可能希望将闭包绑定到this值：

1
2
3
4
5
6
7
8
9
(function() {
    var app = angular.module('guiaV', []);
    app.controller('LaboratorioController', function( $http) {
      this.laboratorios = [];
      $http.get('./laboratorios.json').success(function(data) {
        return this.laboratorios = data;
      }.bind(this));
    });
})();

或者，您可以使用两个范围中都可用的变量：

1
2
3
4
5
6
7
8
9
10
(function() {
    var app = angular.module('guiaV', []);
    app.controller('LaboratorioController', function( $http) {
      this.laboratorios = [];
      var foo = this;
      $http.get('./laboratorios.json').success(function(data) {
        return foo.laboratorios = data;
      });
    });
})();
相关讨论