javascript - 这与 angular.js 中的 $scope 相比？

Question

这个问题已经有答案了:

'this' vs $scope in AngularJS controllers (7 个回答)

已关闭 9 年前。

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

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

我在这里放了一些代码: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>

Angular 代码:

(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'

你的 Controller 返回一个http promise ($http.get(...).success(...)的返回值)，所以Angular认为这个(http promise )是您的实际 Controller (它分配给 $scope.labCtrl 的东西)。

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

小例子here