我正在尝试将承诺绑定到视图。我不知道你是否可以直接这样做,但这就是我正在尝试做的。任何想法我做错了什么?
注意:源有点做作超时并使用静态数据,但这是为了使代码更易于诊断。
编辑: JSFiddle 页面:http: //jsfiddle.net/YQwaf/27/
编辑:解决方案:原来你可以直接绑定承诺。我的原始代码有两个问题:
- 使用 setTimeout() 而不是 angular 的 $timeout 是一个问题。Angular 不知道它需要在触发超时时刷新 UI(你可以在 setTimeout 中使用 $scope.$apply 来解决这个问题,或者你可以只使用 $timeout )
- 绑定到返回承诺的函数是一个问题。如果它被第二次调用,它会做出另一个承诺。更好的是为 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;
};
}