AngularJS : get object by id from factory

问题:

I have a factory to get an array with all my clientes from the database. Then i need to filter this array by the person id and show only it's data in a single page.

I have a working code already, but it's only inside a controller and I want to use it with a factory and a directive since i'm no longer using ng-controller and this factory already make a call to other pages where I need to show client data.

This is what i tried to do with my factory:

app.js

app.factory('mainFactory', function($http){

    var getCliente = function($scope) {
        return $http.get("scripts/php/db.php?action=get_cliente")
        .success( function(data) {
            return data;
        })
        .error(function(data) {
        });
    };

    var getDetCliente = function($scope,$routeParams) {
        getCliente();
        var mycli = data;
        var myid = $routeParams.id;
        for (var d = 0, len = mycli.length; d < len; d += 1) {
            if (mycli[d].id === myid) {
                return mycli[d];
            }
        }
        return mycli;
    };

    return {
        getCliente: getCliente,
        getDetCliente: getDetCliente
    }
});

app.directive('detClienteTable', function (mainFactory) {
    return {
        restrict: "A",
        templateUrl: "content/view/det_cliente_table.html",
        link: function($scope) {
            mainFactory.getDetCliente().then(function(mycli) {
                $scope.pagedCliente = mycli;
            })
        }
    }
});

detClient.html

<p>{{pagedCliente.name}}</p>
<p>{{pagedCliente.tel}}</p>
<p>{{pagedCliente.email}}</p>
[...more code...]

The problem is, I'm not able to get any data to show in the page, and also, i have no errors in my console.

What may be wrong?
Keep in mind I'm learning AngularJS.

回答1:

Basically you need to implement a promise chain as look into your code looks like you are carrying getCliente() promise to getDetCliente method. In that case you need to use .then function instead of using .success & .error which doesn't allow you to continue promise chain. There after from getDetCliente function you again need to use .then function that gets call when getCliente function gets resolved his promise. Your code will reformat it using form it and return mycli result.

Code

var getCliente = function() {
    return $http.get("scripts/php/db.php?action=get_cliente")
    .then( function(res) { //success callback
        return res.data;
    },function(err){ //error callback
       console.log(err)
    })
};

var getDetCliente = function(id) {
    return getCliente().then(function(data){
        var mycli = data;
        var myid = id;
        for (var d = 0, len = mycli.length; d < len; d += 1) {
           if (mycli[d].id === myid) {
              return mycli[d];
           }
        }
        return mycli;
    })
};

Edit

You shouldn't pass controller $scope to the service that will make tight coupling with you directive and controller, Also you want to pass id parameter of your route then you need to pass it from directive service call

link: function($scope) {
    mainFactory.getDetCliente($routeParams.id).then(function(mycli) {
        $scope.pagedCliente = mycli;
    })
}

回答2:

You are treating getCliente as a synchronous call in getDetCliente. Interestingly in your directive you understand that the getDetCliente is asynchronous. Change getCliente to this and treat it as an asynchronous call when you call it in getDetCliente:

var getCliente = function($scope) {
    return $http.get("scripts/php/db.php?action=get_cliente");
};