问题
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