javascript - 你如何在 AngularJS View (ng-show) 中使用 promise ？

Question

我正在尝试从 ng-repeat 输入中获取 $http 调用的响应。然后确定是否显示给定每个响应的单个 ng-repeat。目前实际的 $http api 不可用，所以我只是对响应进行了硬编码。

它在不使用 promise 的情况下工作得很好。但是当使用 promise 方法时，我什至无法在 jsfiddle 上运行它。我怎样才能使 promise 生效？

编辑:感谢 Benjamin Gruenbaum，我修改了我的问题我实际上并没有使用 $http，而是使用 pouchDB(本地数据库，因此无需担心 DOS)。仅以 $http 为例，因为它也返回一个 promise 。我真正需要解决的是如何在添加新名称时获得再次更新的 promise 。例如，如果添加了“joe”，那么他应该在“billsNotPaid”上

http://jsfiddle.net/TheSlamminSalmon/cs0gxxxd/6/

查看:

<div ng-app>    
    <div ng-controller="MainController">        
        <h1>Hello Plunker!</h1>
        <form ng-submit="AddNewGuy()">
            <input type="text" ng-model="newGuy" placeholder="Insert New Guy"></input>
            <input type="submit"></input>
        </form>

        <strong>Everyone</strong>
        <div ng-repeat="name in names">
            {{name}}
        </div>

        <strong>These guys haven't paid their bills (Non Promise)</strong>
        <div ng-repeat="name in names">
            <div ng-show="NotPaidBillsNonPromise(name)">
                {{name}}
            </div>
        </div> 

        <strong>These guys haven't paid their bills (Using http Promise)</strong>
        <div ng-repeat="name in billsNotPaid">
                {{name}}
        </div>
    </div>
</div>

AngularJS Controller :

function MainController($scope, $http) {
    $scope.names = [
        "James",
        "Tim",
        "Alex",
        "Sam",
        "Kim"
    ];
    $scope.billsNotPaid = []; // start as empty

    $scope.NotPaidBillsNonPromise = function (name) {
        if (name == "Tim" || name == "Sam" || name == "Joe") return true;
    };

    $scope.NotPaidBills = function (name) {
        return $http.get("http://echo.jsontest.com/name/" + name)
        .then(function (r) {
                return (r.data.name === "Tim" || r.data.name === "Sam" || r.data.name === "Joe")
        });
    };

    $scope.newGuy;
    $scope.AddNewGuy = function () {
        $scope.names.push($scope.newGuy);
    };

    // start the check for each name
    $scope.names.forEach(function(name){ 
        return $scope.NotPaidBills(name).then(function(notPaid){
            console.log(name, notPaid);
            if(notPaid) $scope.billsNotPaid.push(name); 
        });
    });
}

Answer 1

首先 - 我强烈建议您避免在 ng-repeat 中对每个项目发出 HTTP 请求。它很慢，可能会导致糟糕的用户体验 - 相反，我建议您将这些请求分批处理成一个接受多个值并返回多个值的请求。

---

Angular 通过两种方式的数据绑定(bind)执行更新，绑定(bind)值通过称为摘要循环的循环更新 - 因此每当 Angular 运行这样的循环时，您的所有值都保证在循环运行时是最新的。

幸运的是 - 因为 $http 返回一个 promise - Angular 将在调用结束后安排一个摘要，因为 promise 通过 $evalAsync< 运行它们的 then 回调 这意味着如果尚未安排或正在进行摘要，则将安排摘要。

因此，您只需从 $http promise fulfillment handler 更新范围，它就会起作用。我们添加一个新的范围属性:

$scope.billsNotPaid = [];

这是相应的 Angular:

<div ng-repeat="name in billsNotPaid">
    {{name}}
</div>

调用:

$scope.NotPaidBills = function (name) {
    return $http.get("http://echo.jsontest.com/name/" + name)
    .then(function (r) {
            return (r.data.name === "Tim" || r.data.name === "Sam")
    });
};

// start the check for each name
$scope.names.forEach(function(name){ 
    return $scope.NotPaidBills(name).then(function(notPaid){
        console.log(name, notPaid);
        if(notPaid) $scope.billsNotPaid.push(name); 
    });
});

Fiddle