这与 angular.js 中的 $scope 对比？ [复制]

Question

我正在使用 Angular 开发一个 Rails 应用程序，过去，我一直使用 $scope 来访问 Angular 控制器的变量和方法。 看了 codeschool 的 Shaping up with Angular.js 课程后，我意识到 this 的使用和控制器的别名是访问它们的更好方法。

无论如何，我的应用在 $scope 上运行良好，但是当我更改为“this”实现时，laboratory var 变空了...

我在这里放了一些代码： html:

<div ng-controller="LaboratorioController as labCtrl">
          <tr ng-repeat="laboratorio in labCtrl.laboratorios" >
            <td>{{ laboratorio.nombre }}</td>
            <td>{{ laboratorio.razon_social }}</td>
            <td>{{ laboratorio.direccion }}</td>

角码：

(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;
      });
    });
})();

有什么想法吗？

Answer 1

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

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 承诺（$http.get(...).success(...) 的返回值），因此 Angular 认为这（http 承诺）是您的实际控制器（它分配给 $scope.labCtrl 的东西）。

没时间测试，希望我做对了。

小例子here

Answer 2

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

(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));
    });
})();

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

(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;
      });
    });
})();