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>