AngularJS:从工厂通过id获取对象 [英] AngularJS : get object by id from factory

问题描述

我有一个factory，可以从数据库中获取所有客户端的数组. 然后，我需要由人id过滤此数组，并在单个页面中仅显示其数据.

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.

我已经有一个有效的代码，但是它仅位于controller中，并且我想将其与factory和directive一起使用，因为我不再使用ng-controller并且该factory致电我需要显示客户数据的其他页面.

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.

这就是我尝试使用factory进行的操作:

This is what i tried to do with my factory:

app.js

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

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.

可能出什么问题了?
请记住，我正在学习AngularJS.

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

推荐答案

基本上，您需要实现一个Promise链，因为对代码的查找就像是对getDetCliente方法携带了getCliente() promise一样.在这种情况下，您需要使用.then函数而不是使用.success& .error，不允许您继续承诺链.在getDetCliente函数之后，您再次需要使用.then函数，当getCliente函数得到解决时，它会被调用.您的代码将使用它重新格式化它并返回mycli结果.

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.

代码

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;
    })
};

修改

您不应将控制器$scope传递到将与您的指令和控制器紧密耦合的服务，也要传递路由的id参数，则需要从指令服务调用中传递它 >

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;
    })
}

这篇关于AngularJS:从工厂通过id获取对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！