在 Angular 中将服务数据返回给控制器

Question

我需要通过提供输入日期从服务中检索输出数据。数据在服务上执行，但我无法 return 将数据输出到控制器。我为 code.link 做了一个 plunker 是普拉克 Link

Answer 1

而不是抓住工厂的承诺。从控制器中捕获它。只有 return 工厂内部的 http。

app.controller('myCtrl', function($scope, getMiqaat) {
    $scope.date = "2017-04-11";
    getMiqaat.findMiqaat($scope.date)
        .then(function(response) {
            var all_miqaats = response.data.response;
            var obj = all_miqaats.find(function(v) {
                return v.miqaat_date == $scope.date
            });
            if (obj == undefined || obj == "") {
                console.log("obj = ");
                console.log(obj);
                obj.isHoliday = "100";
                $scope.miqaat = obj;
            } else {
                obj.mq_title = obj.title;
                obj.isHoliday = "101";
                $scope.miqaat = obj;
                console.log("Data from Service");
                console.log(obj);
            }
        })
        .catch(function(response) {
            response.response = "Internal Server Error!";
        });;
});
app.factory('getMiqaat', function($http) {
    return {
        findMiqaat: function(date) {
            var dat = date;
            console.log(dat);
            return $http({
                url: 'miqaat.json',
                method: 'GET',
            })
        }
    };
})

Demo

Answer 2

你需要 return 你的 $http.get 和 .then 你最终修改的变量，比如 obj.

像这样：

return $http({
    url: 'miqaat.json',
    method: 'GET',
})
.then(function(response) {

    var all_miqaats = response.data.response;
    var obj = all_miqaats.find(function(v) {
        return v.miqaat_date == dat
    });

    if (obj == undefined || obj == "") {
        console.log("obj = ");
        console.log(obj);
        obj.isHoliday = "100";
        //  return obj;
    } else {
        obj.mq_title = obj.title;
        obj.isHoliday = "101";
        // return obj;
        console.log("Data from Service");
        console.log(obj);
    }

    return obj;
})

并且，由于这个 returns 承诺，您需要在控制器中将其更改为：

getMiqaat.findMiqaat($scope.date).then(function(res) {
  $scope.miqaat = res;
});

是否应该将 .then 和 catch 移动到 controller 取决于你 reuse 代码的数量。所以，在我知道细节之前不会对此发表评论。

working demo

Answer 3

通过使用下面提到的代码，它将正常工作。请确保密钥与您的 json.

匹配

控制器代码：

var app = angular.module("myApp", []);

app.controller('myCtrl', function($scope, getMiqaat){
   $scope.date = "2017-04-11";
   console.log("date ::"+$scope.date);
   $scope.status;
   $scope.miqaat;
   getMiqaatData();
   function getMiqaatData() {
       getMiqaat.findMiqaat($scope.date)
           .then(function (response) {
               $scope.miqaat = response.data.response[0];
           }, function (error) {
               $scope.status = 'Unable to load  data: ' + error.message;
           });
   }

});

app.service('getMiqaat', function($http){

            this.findMiqaat = function(date){
                var dat = date;
                console.log(dat);
               return  $http({
                   url: 'miqaat.json',
                   method: 'GET',
                });
              }

})

Json :

{
  "status":true,
  "message":"List of the miqaats",
  "response":[
    {"miqaat_date":"2017-04-11",
      "mq_title":" New Year",
      "isHoliday" :"101"
    },
    {"miqaat_date":"2017-04-09",
      "mq_title":"Some Fest",
      "isHoliday" :"101"
    }
    ]
}

在 Angular 中将服务数据返回给控制器

Returning data for service to controller in Angular

return

return-value

angularjs