必须刷新浏览器以查看AngularJs的任何更改(添加/删除)

时间:2015-08-04 08:26:01

标签: javascript angularjs node.js mongodb angular-material

我正在研究一个戒烟令人生畏的项目,我的意思是对我来说都是新手。我正在使用NodeJs,Mongo和Angular来构建我的项目。现在我面临一个关于Angular的问题,基本上当我删除或添加一个用户/任务时,我的项目没有立即显示更新(它应该有角度),我必须刷新我的页面以查看任何更改。我做了一些研究,偶然发现了诸如" digest recycle" 之类的事情。

我必须提到我的所有表单都放在一个对话框中(md-dialog - > angular material)。这是我的项目的视觉效果 - > http://gyazo.com/12bb3d0967ed2067ec0080c07c99f88f

基本上我需要帮助尝试解决这个角度问题,以便我不必刷新浏览器以查看任何更改....

我的app.js代码相当大,显示我无法完全展示,但我会向您展示与用户和任务的保存/删除功能相关的部分。

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();

0 个答案:

没有答案