I am working on a project thats quit daunting, by this I mean is all new to me. I am using NodeJs, Mongo and Angular to build my project. Now I am facing an issue concerning Angular and that is basically when i delete or add a user/task my project does not show the update immediately (which with angular it should), I have to refresh my page to see any changes. I did some research and stumbled on things such as "digest recycle".
I must mention that all my forms are placed in a dialog box (md-dialog -> angular material). Here is a visual of my project -> http://gyazo.com/12bb3d0967ed2067ec0080c07c99f88f
Basically I need help trying to fix this angular issue so that I don't have to refresh my browser to see any changes....
My app.js code is quite large show i am not able to show if completely but i will show you the part that is relevant to the save/delete functionality of a user and task.
App.js:
//Function to save task to db
$scope.save_task = function() {
//console.log("save-task-shizzle", this);
//console.log("sopceingo", $scope.taskInfo);
var url;
console.log(editId);
if (editId) {
url = 'api/task/update/' + editId;
} else {
url = 'api/task/create';
}
console.log("URL URL USA", url, editId, $scope.start_time);
var defaultStart = new Date();
console.log("YYYYYYYYYYYYY -------->>>>>", defaultStart);
var defaultStart = defaultStart.getFullYear() + "-" + (defaultStart.getMonth() + 1) + "-" + defaultStart.getDate();
defaultStart += " 00:00:00";
var defaultEnd = new Date().addDays(2);
var defaultEnd = defaultEnd.getFullYear() + "-" + (defaultEnd.getMonth() + 1) + "-" + defaultEnd.getDate();
defaultEnd += " 00:00:00";
console.log(defaultStart, defaultEnd);
$scope.task_color = $('#containerColorPicker').attr('ng-data-id');
$http.post(url, {
'name': $scope.task_name,
'project_id': $scope.task_project_type,
'location_id': $scope.task_location,
'estimate_time': $scope.task_estimate_time || 2,
'project_client_name': $scope.task_project_client_name,
'url': $scope.task_url,
'resource_link': $scope.task_resource_link,
'notes': $scope.task_notes,
'start_time': $scope.start_time || defaultStart,
'end_time': $scope.end_time || defaultEnd,
'color': $scope.task_color
}, {
headers: {
"Content-Type": "text/plain"
}
})
.success(function(data, status, headers, config) {
//$scope.userInfo.push(data);
//$scope.get_task(); //this will fetch latest record from DB
getTaskFunction(
/* success function */
function(data) {
// $scope.taskInfo.push(data);
console.log("The tasks have been reloaded");
},
/* error function */
function() {
console.log("Server load failed");
}
);
// console.log("The task has been added successfully to the DB");
console.log(data);
$scope.taskInfo.push(data);
})
.error(function(data, status, headers, config) {
console.log("Failed to add the task to DB");
});
}
var getTaskFunction = function(successFn, errorFn) {
// original implementation of $scope.get_user but with success & error used which as passed in as parameter.
$http.get('/api/task/all') // call the server
.success(function(data) { // upon success
successFn(data); // call the function passed into the "getTaskFunction" with the data from the server
//console.log("Retrieved task data from server");
//console.log("logging data: " , data);
$scope.updateGridDataAwesome();
//console.log("Barts test 1 ->", $scope.taskInfo);
})
.error(errorFn || function() {
console.log("Error in retrieving data from server");
}) // process failure
};
this.reloadTaskList = function() {
getTaskFunction(
/* success function */
function(data) {
//debugger;
console.log('foshizzle', data)
$scope.taskInfo = data;
$scope.linkTaskToUser(data);
},
/* error function */
function() {
console.log("Server load failed");
}
)
};
// load list on startup
this.reloadTaskList();
//Function to add a user to the db
$scope.inviteUser = function(){
$http.post('/api/users/invite', {
'email': $scope.user.email,
'role_id': $scope.user.role
}, {
headers: {
"Content-Type": "text/plain"
}
})
.success(function(data, status, headers, config) {
console.log("Successfully saved a user to the DB", data);
$scope.userInfo.push(data);
$scope.update();
})
.error(function(data, status, headers, config) {
console.log("Failed to add user to DB");
});
}
//Retrieving the users
$scope.getUsers = function() {
$http.get('/api/users').success(function(data) {
$scope.userInfo = data;
//console.log("Retrieved users from the server", data);
//$scope.linkTaskToUser(data);
//console.log(data);
for(var i = 0; i < $scope.userInfo.length; i++){
//console.log('---->>>>>' , $scope.userInfo[i].name);
var initials = function(name){
var d1 = name.split(" ")[0].charAt(0).toUpperCase();
var d2;
try{
d2 = name.split(" ")[1].charAt(0).toUpperCase();
}catch(e){
d2 = "";
}
return d1+d2;
}
$scope.userInfo[i].initials = initials($scope.userInfo[i].name);
}
})
.error(function(data, status, headers, config) {
console.log("Error in retrieving users from server");
});
}
$scope.getUsers();
