Angular JS：如何绑定到 Promise

我正在尝试将承诺与视图绑定。我不知道你是否可以直接这样做，但这就是我正在尝试做的。有什么想法我做错了吗？

注意：源代码在超时方面做了一些设计，并使用了静态数据，但这是为了使代码更易于诊断。

EDIT:JSFiddle 页面：http://jsfiddle.net/YQwaf/27/ http://jsfiddle.net/YQwaf/27/

编辑：解决方案：原来你can直接绑定承诺。我的原始代码有两个问题：

1. 使用 setTimeout() 而不是 Angular 的 $timeout 是一个问题。 Angular 不知道触发超时时需要刷新 UI（您可以使用 setTimeout 内的 $scope.$apply 来解决此问题，或者您可以只使用 $timeout ）
2. 绑定到返回承诺的函数是一个问题。如果它第二次被调用，它就会做出另一个承诺。更好的方法是为 Promise 设置范围变量，并仅根据需要创建新的 Promise。 （在我的例子中，这是在国家代码上调用 $scope.$watch ）

HTML:

<div ng:controller="addressValidationController">
    Region Code <select ng:model="regionCode" ng:options="r.code as r.name for r in getRegions()"/>
    Country Code<select ng:model="countryCode"><option value="US">United States</option><option value="CA">Canada</option></select>
</div>

JS:

function addressValidationController($scope, $q) {
    var regions = {
        US: [{code: 'WI',name: 'Wisconsin'}, {code: 'MN',name: 'Minnesota'}], 
        CA: [{code: 'ON',name: 'Ontario'}]
    };
    $scope.getRegions = function () {
        var deferred = $q.defer();
        setTimeout(function () {
            var countryRegions = regions[$scope.countryCode];
            console.log(countryRegions);
            if(countryRegions === undefined) {
                deferred.resolve([]);
            } else {
                deferred.resolve(countryRegions);
            }
        }, 1000);
        return deferred.promise;
    };
}

从 Angular 1.2 开始，你不能再直接在模板中使用 Promise https://github.com/angular/angular.js/commit/5dc35b527b3c99f6544b8cb52e93c6510d3ac577.
相反，您需要将结果放入$scope inside then，就像你平常做的那样——没有魔法。

作为获取旧行为的临时解决方法，您可以调用

$parseProvider.unwrapPromises(true)

但此功能稍后将被删除，因此不要依赖它。