在成功的$ http GET请求中,$ scope变量未在控制器中更新

时间:2016-01-29 04:32:57

标签: javascript angularjs angular-promise

我的代码

/* code written for my factory */

/**
*  service/factory
*
* Description
*/

angular
    .module('Translationapp')
    .factory('LogService', LogService);

LogService.$inject = ['$rootScope','$http', '$q', 'API_URL'];

function LogService ($rootScope,$http, $q,appurl) {

    var req = {
            method: 'GET',
            url: appurl+'getlogs',
    }

    var defer = $q.defer();

    var logdata =  {
        getLogs : getLogs,
        AllLogs : []
    }

    return logdata;

    function getLogs () {

        $http.get('http://localhost/welcome_translation/getlogs')
            .then(getLogsComplete)
            .catch(getLogsFailed);

        return defer.promise;      
    }

    function getLogsComplete (response) {

        logdata.AllLogs = response.data;
        console.log('responsedata ='+JSON.stringify(logdata.AllLogs)); // getting data here
        defer.resolve(response);

    }

    function getLogsFailed () {
        defer.reject('Some Error');
    }
}

/* code for my controller */

/*
controller for logs
*/

angular
    .module('Translationapp')
    .controller('LogsController', ['$rootScope','$scope', '$http', 'API_URL','$filter' , 'NgTableParams', 'LogService' , function($rootScope, $scope,$http, appurl,$filter, NgTableParams, LogService){

    $scope.currentindex = 1;

    $scope.logs = LogService.AllLogs;

    logs();

    function logs() {


        /**
        * Step 1
        * Ask the getLogs function for the
        * logs data and wait for the promise
        */

        return getLogs().then(function(response) {

            /**
            * Step 4
            * Perform an action on resolve of final promise
            */
            //console.log(JSON.stringify(response.data));
            $scope.logs = response.data; 
            console.log(JSON.stringify($scope.logs));   // here I am getting the data
            //return $scope.logs;
        });
    }

    console.log('All Log ='+ JSON.stringify($scope.logs)); // getting no data here

    function getLogs() {
      /**
       * Step 2
       * Ask the data service for the data and wait
       * for the promise
       */
      return LogService.getLogs()
        .then(function(data) {

            /**
            * Step 3
            * set the data and resolve the promise
            */
            return data;
        });
    }

    /* get list of roles */

    $http.get(appurl+'getroles')
            .success(function (response) {
                $scope.roles = response;
            });

    $scope.onTimeSet = function (newDate, oldDate) {
        $scope.formattedDate = $filter('date')(newDate, 'dd-MM-yyyy')
    }

    $scope.tableParams = new NgTableParams(
            { 
                page: 1, 
                count: 5,

            },
            {
                total: $scope.logs.length,
                counts: [],
                getData: function($defer, params) {
                $scope.data = $scope.logs.slice((params.page() - 1) * params.count(), params.page() * params.count());
                $defer.resolve($scope.data);
            }
    });

}]);

1 个答案:

答案 0 :(得分:0)

我提取了代码的相关部分:

getLogs().then(function(response) {
   $scope.logs = response.data; 
   console.log(JSON.stringify($scope.logs));   // here I am getting the data
});

console.log('All Log ='+ JSON.stringify($scope.logs)); // getting no data here

问题是传递给then的成功处理程序是 最终日志时异步调用 检索。但是,您看不到输出的console.log 在发出日志请求之后但很久才发现它们。这是关于承诺的全部观点。一旦结果出现,就会传递一个处理程序来执行。但是你可以立即做其他事情,无论需要多长时间才能完成承诺。

如果您不清楚这一点,我建议您从JS开始 承诺教程,教你所需的主要概念 了解。这篇文章可能会有所帮助:

http://www.html5rocks.com/en/tutorials/es6/promises/