доступ «это» в обратном вызове ошибки HTTP

Question

У меня есть следующий контроллер и http-запрос.

Я устанавливаю connectionError в false и хочу установить его true в callbackError в HTTP-запросе.

я получаю следующее сообщение об ошибке при использовании this

Cannot set property 'connectionError' of undefined

Все отлично работает, когда я использую $scope.

Я прочитал следующую статью https://toddmotto.com/digging-into-angulars-controller-as-syntax/, которая объясняет многое о this и scope и отчасти понимаю, что в моем коде ниже this, который первоначально устанавливает «ConnectionError» ложь не то же самое this в функции callbackError как this относится к функции, в которой он находится ...?!? (ну это в настоящее время то, что я интерпретирую ...)

Так что мой вопрос: есть ли способ установить «connectionError» в true. Или это классический пример, где лучше подходит $scope?

Код:

var userApp = angular.module('UserApp', []); 


userApp.controller('UserListCtrl', ['$scope', '$http', function ($scope, $http){ 

    var type = this; 
    type.users = []; 

    // doesn't work 
    this.connectionError = false; 
    // works 
    $scope.connectionError = false; 

    // get the data 
    $http.get('./types/users.json') 
     // on success 
     .then(function successCallback(response){ 
      type.users = response.data; 

     }, 
     // on error 
     function errorCallback(response){ 
      // doesn't work 
      this.connectionError = true; 
      // works 
      $scope.connectionError = true; 
     }); 

}]); 

Answer 1

Вы получите ошибку, потому что это имеет другое значение при использовании внутри другой функции.

Для использования функции this функции управления внутри функции обратного вызова ошибки this другой переменной в контроллере. В этом случае вы уже сделали это с переменной type, поэтому используйте ее!

 function errorCallback(response){ 
      type.connectionError = true; 
     });  

А что касается $scope, особенно если вы используете синтаксис controllerAs, сильно избежать.

Answer 2

Контекст this в обработчике ошибок не является одним из функций главного контроллера. В строгом режиме контекст вызова функции - undefined.
Чтобы решить эту проблему, и иметь доступ к диспетчерскому this используйте bind()method:

$http.get('./types/users.json') 
    // on success 
    .then(function successCallback(response){ 
     type.users = response.data; 

    }, 
    // on error 
    function errorCallback(response){ 
     // Now will work 
     this.connectionError = true; 
     // works 
     $scope.connectionError = true; 
    }.bind(this)); 

Смотреть подробнее в Gentle explanation of this.