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

问题描述

我有一个 factory 可以从数据库中获取包含我所有客户的数组.然后我需要通过 person 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.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.

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

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

推荐答案

基本上你需要实现一个承诺链，因为查看你的代码看起来就像你带着 getCliente() 承诺给 getDetCliente 方法.在这种情况下，您需要使用 .then 函数而不是使用 .success &.error 不允许您继续承诺链.从 getDetCliente 函数之后，您再次需要使用 .then 函数，该函数在 getCliente 函数得到解决他的承诺时被调用.您的代码将使用 form it 重新格式化它并返回 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屋！