Return value from factory service to controller in AngularJs is lost

时间:2016-03-04 18:07:15

标签: javascript angularjs

I want to return a list object from factory service to a controller. The list object contains data when I return it from the service, but when the control reaches the calling controller, the list get empty (the values are lost).

I call the ng-change="search()" on the text input

Here's the code:

factoryservice.js

    app.factory('newService', ['$http', '$q','$filter', function ($http, $q, $filter) 
{
    var ServiceFactory = {};

   var searchMatch = function (haystack, needle) {
        if (!needle) {
            return true;
        }
        return haystack.toString().toLowerCase().indexOf(needle.toLowerCase()) !== -1;
    };

    var _search = function (Items, data, sortingOrder, query, reverse) {
        Items = $filter('filter')(data, function (item) {
            for (var attr in item) {
                if (angular.isUndefined(item[attr]) || item[attr] === null)
                    continue;
                if (searchMatch(item[attr], query))
                    return true;
            }
            return false;
        });
        // take care of the sorting order
        if (sortingOrder !== '') {
            Items = $filter('orderBy')(Items, sortingOrder, reverse);
        }

        return Items;
    };

    ServiceFactory.search = _search;

    return ServiceFactory;
}]);

Here, the "return Items" in the search method has proper values.

controller.js

app.controller('mycontroller', ['$scope', '$http', '$filter', 'Service', function ($scope, $http, $filter, Service) {

    var sortingOrder = 'Site'; 
    $scope.sortingOrder = sortingOrder;
    $scope.reverse = false;
    $scope.Items = [];

    $scope.Data = function () {
        $scope.loading = true;
        $http({
            url: "http://localhost:50100/api/mycontroller",
            dataType: 'json',
            method: 'GET',
            data: '', // data:'', for input parameters, create a small entity class and assign it
            headers: {
                "Content-Type": "application/json"
                // "Content-Type": 'application/x-www-form-urlencoded'
            }
        }).success(function (response) {
            $scope.Data = response;
            $scope.Items = $scope.Data;
        })
       .error(function (error) {
           alert(error);
       })
         .finally(function () {
             $scope.loading = false;
         });
    }

    $scope.search = function () {
        return Service.search($scope.Items, $scope.Data, $scope.sortingOrder, $scope.query, $scope.reverse);
    };

}]);

Here, the $scope.search contains NO VALUES (data is lost here).

I am new to angularJS, hope someone can help me on this. Thanks in advance.

3 个答案:

答案 0 :(得分:0)

您需要将服务名称(newService而非Service)注入控制器,例如:

app.controller('mycontroller', ['$scope', '$http', '$filter', 'newService', function ($scope, $http, $filter, newService) {

因此,您的$scope.search函数应修改为:

$scope.search = function () {
        return newService.search($scope.Items, $scope.Data, $scope.sortingOrder, $scope.query, $scope.reverse);
};

如果以上操作不起作用,我可以仔细查看您的服务设置。

答案 1 :(得分:0)

您的$scope.Data函数正在成功处理函数中替换它自己。

$scope.Data = function () {
        $scope.loading = true;
        $http({
            url: "http://localhost:50100/api/mycontroller",
            dataType: 'json',
            method: 'GET',
            data: '', // data:'', for input parameters, create a small entity class and assign it
            headers: {
                "Content-Type": "application/json"
                // "Content-Type": 'application/x-www-form-urlencoded'
            }
        }).success(function (response) {
            //THIS IS A PROBLEM
            $scope.Data = response;
            $scope.Items = $scope.Data;
        })
       .error(function (error) {
           alert(error);
       })
         .finally(function () {
             $scope.loading = false;
         });
    }

答案 2 :(得分:0)

谢谢回复朋友...... !!!

我刚刚更改了以下代码行,它似乎正在运行。

$ scope.search = function(){         $ scope.search = Service.search($ scope.Items,$ scope.Data,$ scope.sortingOrder,$ scope.query,$ scope.reverse);     };