Page 435 - AngularJS权威教程

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

通过在 HomeController 中使用 UserService ， 现在我们可以移除硬编码的值 19
“CA/San_Francisco”，然后使用新的UserService对象返回的地址替换它。

// ... 20
.controller('MainController', function($scope, $timeout, Weather, UserService) {
// ...
$scope.user = UserService.user;
Weather.getWeatherForecast($scope.user.location).then(function(data) { 21
$scope.weather.forecast = data;
});
// ... 22
})
正如我们可以看到的那样，如果切换到设置视图，然后输入“NY/New_York”，可以看到天气
会根据我们在设置页面中设置的地址发生改变，如图31-10所示。 23

24

25

26

27

28
图31-10 纽约天气
29
31.12 城市自动填充/自动完成

30
每次都需要输入一个符合Wunderground API风格的城市很不方便（经度/维度、城市和州、国
①
家代码，等等）。幸好，Wunderground API还为我们提供了一个autocomplete API 。
31
无需要求用户知道具体城市的格式，我们可以提供一个列表，供用户选择。

为了保持简单性和灵活性，这里只会创建一个未加工的基于JavaScript的自动完 32
成，而不是使用插件，比如typeahead.js或者jQuery插件库。
33
要做到这一点，我们要在<input>元素上创建一个指令，用来插入一个带建议地址的<ul>
元素。
34
.directive('autoFill', function($timeout) {
return {
restrict: 'EA', 35
scope: {
autoFill: '&',
—————————— 36
① http://www.wunderground.com/weather/api/d/docs?d=autocomplete-api