调用数据服务后变量值未定义

Question

我有一个 angular 调用数据服务 'takeSurveyDataService' 的 js 控制器 'TakeSurveyController'。控制器有一个变量 empId，我使用 'this' 关键字成功访问了它。但是，在我调用数据服务后不久，该变量的值就变为未定义。

(function(){
dataUrls = {

    employeeUrl : '/SurveyPortal/Company/Employees/'    
}

angular.module('takeSurvey',[])
.service('takeSurveyDataService',function($http,$log){
    this.checkEmployee = function(employeeId){
        var url = dataUrls.employeeUrl + employeeId;
        return $http.get(url);
    };

})
.controller('TakeSurveyController',function($http,takeSurveyDataService,$location){
    this.empId = '';
    this.checkEmployee = function(){
        takeSurveyDataService.checkEmployee(this.empId).then(this.attemptSurvey);//empId has value here. Call successful to data service
    };
    this.attemptSurvey = function(employeeResponse) {
        if(employeeResponse.data=="true"){
            $location.path('/attemptSurvey/'+this.empId); //empId variable undefined here, unable to access value that was available above

        }
        else{
            this.empId = '';
            alert("This empId has not been registered. Please register before taking survey!");
        }

    };
})
})();

以下是 html 代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div align="center" style="margin-top:50px">
    <form name="checkEmployee" ng-controller="TakeSurveyController as takeSurveyController" ng-submit="takeSurveyController.checkEmployee()" >
        <input type="text" ng-model="takeSurveyController.empId" placeholder="Employee ID" /><br>
        <input type="submit" class="btn btn-large btn-success" value="Move to survey" />
    </form>
</div>
</body>
</html>

Answer 1

您必须非常小心地使用此内部函数，因为 'this' 单词每次根据上下文获得不同的含义。我相信在 promise callback 'this' get 期间有不同的含义，它正在失去与 TakeSurveyController 的连接。请尝试将 'this' 分配给 'self' 变量，这在 angular 和 js:

中总是很好的做法

(function(){
dataUrls = {

    employeeUrl : '/SurveyPortal/Company/Employees/'    
}

angular.module('takeSurvey',[])
.service('takeSurveyDataService',function($http,$log){
    var self = this;
    self.checkEmployee = function(employeeId){
        var url = dataUrls.employeeUrl + employeeId;
        return $http.get(url);
    };

})
.controller('TakeSurveyController',function($http,takeSurveyDataService,$location){
    var self = this;
    self.empId = '';
    self.checkEmployee = function(){
        takeSurveyDataService.checkEmployee(self.empId).then(self.attemptSurvey);//empId has value here. Call successful to data service
    };
    self.attemptSurvey = function(employeeResponse) {
        if(employeeResponse.data=="true"){
            $location.path('/attemptSurvey/'+self.empId); //empId variable undefined here, unable to access value that was available above

        }
        else{
            self.empId = '';
            alert("This empId has not been registered. Please register before taking survey!");
        }

    };
})
})();

调用数据服务后变量值未定义

Value of variable becomes undefined after calling data service

angularjs

angularjs-controller