Это vs $scope в angular.js?

Я разрабатываю приложение rails с angular, а в прошлом я использовал $scope для доступа к переменным и методам контроллеров angular. После просмотра Shaping с помощью Angular.js курса в школах кодов я понял, что использование этого и псевдоним контроллеров - лучший способ доступа к ним.

В любом случае, мое приложение отлично работает с $scope, но когда я перехожу к реализации this, labatorios 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>

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

любая идея?

Ответ 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).

Нет времени проверить его, надеюсь, что я понял.

Маленький пример здесь

Ответ 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;
      });
    });
})();