Question

我正在开发一个带有角度的rails应用程序，在过去我一直使用$ scope来访问angular的控制器的变量和方法。在使用了代码学校的Angular.js课程后，我意识到使用 this 和控制器的别名是访问它们的更好方法。

无论如何，我的应用程序可以正常使用$ scope但是当我改为“ this ”实现时，laboratorios 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。如果构造函数返回另一个对象，则该对象应该是新对象。 e.g：

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（返回值为$http.get(...).success(...)），所以angular认为这个（http promise）是你的实际控制器（它赋予$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;
      });
    });
})();

angular.js中的这个vs $ scope？

2 个答案: