Page 437 - AngularJS权威教程

31.12 城市自动填充/自动完成 417

method: 'GET', 19
url: "http://autocomplete.wunderground.com/aq?query=" + query
}).success(function(data) {
d.resolve(data.RESULTS);
}).error(function(err) { 20
d.reject(err);
});
return d.promise; 21
}
回到SettingsController中，我们可以引用这个函数来检索建议值列表。记住，需要在控
制器中注入这个Weather服务来引用它。 22

.controller('SettingsController',
function($scope, UserService, Weather) { 23
// ...
$scope.fetchCities = Weather.getCityDetails;
}); 24
在这个指令中，可以调用这个函数，我们想在这个函数引用的动作上触发修改。
25
// ...
tEle.replaceWith(tplEl);
return function(scope, ele, attrs, ctrl) {
var minKeyCount = attrs.minKeyCount || 3, 26
timer,
input = ele.find('input');

input.bind('keyup', function(e) { 27
val = ele.val();
if(val.length < minKeyCount) {
if(timer) $timeout.cancel(timer); 28
scope.reslist = null;
return;
} else { 29
if(timer) $timeout.cancel(timer);
timer = $timeout(function() {
scope.autoFill()(val).then(function(data) {
if(data && data.length > 0) { 30
scope.reslist = data;
scope.ngModel = data[0].zmw;
} 31
});
}, 300);
}
}); 32

// 失去焦点时隐藏reslist
input.bind('blur', function(e) { 33
scope.reslist = null;
scope.$digest();
});
} 34

这里用了一个延时，以便只在用户输入完成后调用该函数。使用延时只是一种阻止函数被重
复调用的简单方式，而我们真正感兴趣的只是第一次调用suggestion API，如图31-11所示。 35

36