Question

我有以下控制器和http请求。

我将connectionError设置为false，并希望在http请求中的callbackError上将其设置为true。

使用this

时出现以下错误

Cannot set property 'connectionError' of undefined

当我使用$scope时，一切正常。

我已阅读以下文章https://toddmotto.com/digging-into-angulars-controller-as-syntax/，该文章解释了很多关于this和scope的内容，并且在我的代码下面了解了最初设置的this connectionError'为false与callbackError函数中的this不同，因为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，特别是如果您使用的是控制器语法，请强烈避免使用它。

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中查看更多详情。

在http错误回调中访问'this'

2 个答案: