Twitter bootstrap 如何使用$resource填充Angular UI引导程序typeahead

我正在尝试使用我已设置的REST资源来获得角度UI引导。但我不知道如何让它与异步特性一起工作

目前，我已经修改了AngularUI引导程序给出的示例

所以我的html看起来是这样的，调用getLibs（）来获取typeahead下拉列表

<div class='container-fluid' ng-controller="TypeaheadCtrl">
    <pre>Model: {{selected| json}}</pre>
    <input type="text"  typeahead="lib.name for lib in getLibs($viewValue)" active='active' ng-model="selected" typeahead-min-length='3' >
</div>

))

我的控制器看起来是这样的（我猜它在这里，我做了一些不正确的事情）：

据我所知，typeahead菜单是从getLibs（）函数的返回值填充的。 调用getLibs（）时，它正在查询REST接口，但最初返回一个空值。这是由提供给Library.query（）方法的函数填充的，这是在从REST请求返回数据之后完成的

这基本上意味着菜单更新比我想要的晚一个按键。我输入'3456'，它将被REST接口的'345'查询结果填充

---

从Library.query（）函数返回响应时，如何更新菜单？我这样做正确吗？

promise API（

$q

）上的继电器发出的typeahead指令，用于处理异步建议。

$resource

的问题在于，它用于缺少对承诺的支持（它是最近才在不稳定的分支中添加的）。这里有两种解决方案：

1） 依赖于与承诺一起工作的

$http

（对于大多数自动完成的情况，IMO$http应该足够了）。 2） 切换到AngularJS的最新不稳定版本并使用promises

$resource的用途是使用全套HTTP谓词以RESTful端点为目标。如果您只想查询数据，那么最好还是使用$http进行查询

---

关于typeahead还有一个类似的问题，答案是关于它在

$http

中的用法：

如果你不想使用$http（因为你想重用你现有的$resource），或者不想切换到不稳定的分支，你可以将对$resource的调用封装在一个承诺中。这有点冗长，但它是有效的。 快速示例（使用AngularJS 1.0.6）：

---

如果你在Angular 1.2.13上（或者在附近的某个地方，还没有全部测试过）

见：

为我工作。

我是这样解决的：

我的工厂：

...
$scope.searchTypeAhead = function(name) {
  var person = {
    'name': name
  };

  return PersonService.search(person)
    .$promise.then(function(response) {
      return response;
    });
};

我的控制器

UsuarioResource.query().$promise

---

只需从资源返回$PROMITE：

[
    {name: "somename", zipcode: 11111, etc: ""},
    {name: "somename", zipcode: 22222, etc: ""},
    {name: "somename", zipcode: 33333, etc: ""}
]

---

此代码适用于angular 1.6和最新ui的angular-bootstrap3-typeahead

GET/cities的api端点响应？name=“somename”：

getCities: {
    url: '/cities',
    method: 'GET
}

$scope.getCities = function(name) {
    return City.getCity({
        name: name
    }).$promise.then(function(response) {
        return response;
    });
};

<input ng-model-control data-ng-model="city" uib-typeahead="city.name for city in getCities($viewValue)" />

$资源工厂：

getCities: {
    url: '/cities',
    method: 'GET
}

$scope.getCities = function(name) {
    return City.getCity({
        name: name
    }).$promise.then(function(response) {
        return response;
    });
};

<input ng-model-control data-ng-model="city" uib-typeahead="city.name for city in getCities($viewValue)" />

控制器：

getCities: {
    url: '/cities',
    method: 'GET
}

$scope.getCities = function(name) {
    return City.getCity({
        name: name
    }).$promise.then(function(response) {
        return response;
    });
};

<input ng-model-control data-ng-model="city" uib-typeahead="city.name for city in getCities($viewValue)" />

查看：

getCities: {
    url: '/cities',
    method: 'GET
}

$scope.getCities = function(name) {
    return City.getCity({
        name: name
    }).$promise.then(function(response) {
        return response;
    });
};

<input ng-model-control data-ng-model="city" uib-typeahead="city.name for city in getCities($viewValue)" />

---

此解决方案似乎不适用于筛选，请参见。

实际上，您可以不使用then（）方法返回$promise，因为它是多余的。我不明白为什么在调用PersonService时要传入person对象，因为我在工厂定义中没有看到person对象。