Angular Controller 不是控制台记录数据。但是，Service 正在传递数据。答案

【问题标题】：Angular Controller not console logging data. However, Service is passing in the data.Angular Controller 不是控制台记录数据。但是，Service 正在传递数据。
【发布时间】：2015-10-18 00:18:06
【问题描述】：

我的后端已链接到该服务。当我在控制器上调用我的函数时，它会在服务中执行该函数，并且控制台会记录数据。从服务到控制器的数据是通过一个承诺传递的。我得到了适当的数据。但是，要在我的范围内绑定数据，我需要控制器上的数据。当我控制台记录数据时，我得到未定义的控制台日志。我不确定我做错了什么。

控制器

"use strict";

app.controller("weatherCtrl", function($scope, weatherService) { //START APP

// ***********************************************
// *************** GET LATEST DATA ***************
// ***********************************************  
    $scope.getTodaysWeather = function() { //OPEN FUNCTION
        weatherService.getWeatherData().then(function(data) {
            console.log("Weather Control", data);
            // $scope.todaysWeather = data;

        });
    }; //CLOSE FUNCTION

    $scope.getTodaysWeather(); //INVOKE THE FUNCTION

}); //CLOSE APP

服务

"use strict";

app.service("weatherService", function($http, $q) { //START APP

// ***********************************************
// *************** GET LATEST DATA ***************
// ***********************************************
    this.getWeatherData = function() { //OPEN FUNCTION
        var defer = $q.defer(); //promise 
        $http.get("/app/weather/weatherData")
        .success(function(response) { //callback for resolve
            console.log("Main Service Data", response); 

            var weatherDataObj = response.report;
            var weatherDataArray = [];

            for (var key in weatherDataObj) {
                weatherDataArray.push({
                    max_temp: weatherDataObj.max_temp,
                    min_temp: weatherDataObj.min_temp
                });
            }
            console.log("weatherDataArray from Service", weatherDataArray);
            defer.resolve(); //successful promise
        })
        .error(function(err) {
            defer.reject(err);
        });
        return defer.promise; //return promise "q"
    }; //CLOSE FUNCTION

}); //CLOSE APP

【问题讨论】：

标签： javascript angularjs model-view-controller angularjs-scope

【解决方案1】：

"use strict";

app.service("weatherService", function($http, $q) { //START APP

// ***********************************************
// *************** GET LATEST DATA ***************
// ***********************************************
    this.getWeatherData = function() { //OPEN FUNCTION
        var defer = $q.defer(); //promise 
        $http.get("/app/weather/weatherData")
        .success(function(response) { //callback for resolve
            console.log("Main Service Data", response); 

            var weatherDataObj = response.report;
            var weatherDataArray = [];

            for (var key in weatherDataObj) {
                weatherDataArray.push({
                    max_temp: weatherDataObj.max_temp,
                    min_temp: weatherDataObj.min_temp
                });
            }
            console.log("weatherDataArray from Service", weatherDataArray);
            defer.resolve(weatherDataArray); //YOU NEED TO RESOLVE THE DATA
        })
        .error(function(err) {
            defer.reject(err);
        });
        return defer.promise; //return promise "q"
    }; //CLOSE FUNCTION

}); //CLOSE APP

【讨论】：

【解决方案2】：

将weatherDataArray 传递给promise 的解析，如下所示：

defer.resolve(weatherDataArray); //successful promise

无论您传递到解决方案还是拒绝承诺中，您都可以在 then 函数中访问（例如，在您的控制器中）。

【讨论】：

【解决方案3】：

defer.resolve 的函数中应该有 weatherDataArray，这样相应的 .then 函数的第一个参数中就会有 data。

defer.resolve(weatherDataArray); //successful promise

【讨论】：

@MihirPatel 你有多个答案要接受..很高兴帮助你..谢谢:)

【解决方案4】：

您不需要var defer = $q.defer()，因为$http 返回一个承诺。使用$http.get().then 而不是.success。

"use strict";

app.service("weatherService", function($http) { // removed $q

// ***********************************************
// *************** GET LATEST DATA ***************
// ***********************************************
    this.getWeatherData = function() { //OPEN FUNCTION
        return $http.get("/app/weather/weatherData") // $http returns a promise that we are going to chain, the return statement will return the last promise in the chain
        .then(function(response) { // .then gets the result of the previous $http promise, and creates a new promise (the last one in the chain).
            console.log("Main Service Data", response); 

            **var weatherDataObj = response.data.report;**
            var weatherDataArray = [];

            for (var key in weatherDataObj) {
                weatherDataArray.push({
                    max_temp: weatherDataObj.max_temp,
                    min_temp: weatherDataObj.min_temp
                });
            }
            console.log("weatherDataArray from Service", weatherDataArray);
            return weatherDataArray; // the end result of the promise chain
        });
    }; //CLOSE FUNCTION

}); //CLOSE APP

【讨论】：