Value of variable becomes undefined after calling data service

痴心易碎 提交于 2020-01-06 13:11:03

问题


I have a angular js controller 'TakeSurveyController' which calls a data service 'takeSurveyDataService'. The controller has a variable empId which I am accessing successfully using the 'this' keyword. However, the value of this variable becomes undefined soon after I make a call to the data service.

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

    };
})
})();

Following is the html code.

<!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>

回答1:


You must be very carefull using this inside functions since 'this' words get different meaning each time depending on context. I believe during promise callback 'this' get's different meaning and it is loosing connection with TakeSurveyController. Please try to assign 'this' to 'self' variable which is always good practice in angular and 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!");
        }

    };
})
})();


来源:https://stackoverflow.com/questions/29728152/value-of-variable-becomes-undefined-after-calling-data-service

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!