AngularJS：从工厂通过 id 获取对象

Question

我有一个factory 从数据库中获取包含我所有客户的数组。 然后我需要按人 id 过滤这个数组，并在一个页面中只显示它的数据。

我已经有一个工作代码，但它只在controller 内，我想将它与factory 和directive 一起使用，因为我不再使用ng-controller 和这个factory调用我需要显示客户数据的其他页面。

这就是我试图用我的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...]

问题是，我无法在页面中显示任何数据，而且我的控制台中没有错误。

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

Answer 1

您将getCliente 视为getDetCliente 中的同步调用。有趣的是，在您的指令中，您了解 getDetCliente 是异步的。把getCliente改成这个，在getDetCliente调用的时候把它当做异步调用：

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

Answer 2

基本上，您需要实现一个承诺链，因为查看您的代码看起来您​​将getCliente() 承诺传递给getDetCliente 方法。在这种情况下，您需要使用 .then 函数而不是使用 .success 和 .error 这不允许您继续承诺链。在getDetCliente 函数之后，您再次需要使用.then 函数，该函数在getCliente 函数得到解决他的承诺时被调用。您的代码将使用 form it 重新格式化它并返回 mycli 结果。

代码

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 参数，然后您需要从指令服务调用中传递它

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