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

时间:2017-04-11 07:13:37

标签: angularjs return return-value

我需要通过提供输入日期来检索服务中的输出数据。数据在服务上执行但我无法将输出数据返回给控制器。我为code.link做了一个plunker  Plaunker Link

3 个答案:

答案 0 :(得分:3)

您需要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;
})

并且,由于这会返回promise,因此在控制器中您需要将其更改为:

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

您是否应将.thencatch移至controller取决于您reuse代码的数量。所以,在我知道细节之前不会发表评论。

working demo

答案 1 :(得分:1)

而不是从工厂获得承诺。从控制器中捕获它。只返回工厂内的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

答案 2 :(得分:0)

通过使用下面提到的代码,它将正常工作。请确保按照你的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"
    }
    ]
}