Javascript “角度UI类型前进”下拉列表不会出现

Javascript “角度UI类型前进”下拉列表不会出现,javascript,angularjs,twitter-bootstrap,angularjs-directive,bootstrap-typeahead,Javascript,Angularjs,Twitter Bootstrap,Angularjs Directive,Bootstrap Typeahead,我结合使用Web Api来加载搜索结果。 我的Angular版本是1.2.2,bootstrap版本是3.1.0。我应该提到我也在使用typescript 当我在搜索框中键入内容时,我希望下拉菜单中的建议会从输入中下拉出来。当我检查控制台时,我看到返回的数据,问题是没有显示它的下拉菜单 以下是我的HTML+角度指令: <div class="input-group"> <input type="text" class="form-control"

我结合使用Web Api来加载搜索结果。 我的Angular版本是1.2.2,bootstrap版本是3.1.0。我应该提到我也在使用typescript

当我在搜索框中键入内容时,我希望下拉菜单中的建议会从输入中下拉出来。当我检查控制台时,我看到返回的数据,问题是没有显示它的下拉菜单

以下是我的HTML+角度指令:

<div class="input-group">
                <input type="text" class="form-control" placeholder="Search" ng-model="selected"
                       data-typeahead="searchResult as searchResult for searchResult in search($viewValue) | filter:$viewValue" >
                <div class="input-group-btn">
                    <button class="btn btn-default" type="submit" ng-click="search(Text)"><i class=" glyphicon glyphicon-search"></i></button>
                </div>
            </div>
这是我的数据服务中的搜索功能

export interface ICommonDataService extends IBaseDataService {
    search(employeeId: string, criteria: string, successCallback: (data: SearchResult) => any);
}
dataservice.ts信息:

export class DataServicBase {
    public httpService: ng.IHttpService;
    public serviceBase = '/services/api';

    public static $inject = [
        '$http'
    ];

    constructor($http: any) {
        this.httpService = $http;
    }
}

    export class CommonDataService extends DataServicBase implements ICommonDataService {
    public serviceUrl = this.serviceBase + '/common';

    search(employeeId: string, criteria: string, successCallback: (data: SearchResult) => any) {
        this.httpService.get(this.serviceUrl + '/' + employeeId + '/search/' + criteria)
            .success(function (data) {
                successCallback(data);
            });
    }
}
这是SearchResult的外观:

// Class
export class SearchResult {
    // Constructor
    constructor(
        public Employees: Employee[],
        public Filters: Employee[],
        public Projects: Project[]
        ) {
    }
}
我得到的错误是:

Error: matches is undefined
.link/getMatchesAsync/<@https://web.plank.local/Scripts/ui-bootstrap-tpls-0.10.0.js:3186
qFactory/defer/deferred.promise.then/wrappedCallback@https://web.plank.local/scripts/angular.js:10655
qFactory/defer/deferred.promise.then/wrappedCallback@https://web.plank.local/scripts/angular.js:10655
qFactory/ref/<.then/<@https://web.plank.local/scripts/angular.js:10741
$RootScopeProvider/this.$get</Scope.prototype.$eval@https://web.plank.local/scripts/angular.js:11634
$RootScopeProvider/this.$get</Scope.prototype.$digest@https://web.plank.local/scripts/angular.js:11479
$RootScopeProvider/this.$get</Scope.prototype.$apply@https://web.plank.local/scripts/angular.js:11740
textInputType/listener@https://web.plank.local/scripts/angular.js:15739
jQuery.event.dispatch@https://web.plank.local/scripts/jquery-2.1.0.js:4371
jQuery.event.add/elemData.handle@https://web.plank.local/scripts/jquery-2.1.0.js:4057
aM@https://cdn.qbaka.net/reporting.js:78

https://web.plank.local/scripts/angular.js
Line 9159
错误:未定义匹配项

.link/getMatchesAsync/主要问题是您希望typeahead处理的数据列表不是列表(或未填充)。
在我看来,您在控制器中的函数搜索应该返回数据,而这只是一个承诺。您可以尝试返回数据,为了使其更加健壮,您可以添加limitToFilter。而不是将其放在共享的scope.searchResult中,因为您的typeahead根本不会获取它

向我们展示您的JavaScript代码(服务)。但是快速看一下您的示例,您似乎没有从
搜索
方法返回任何内容。@pkozlowski.opensource我已经更新了问题。如果您需要更多信息,以防我遗漏了一些内容,请告诉我。我们需要查看
controller.dataService
中的代码-JavaScript中的
dataService
是什么,它是如何编写的?@pkozlowski.opensource我已经包含了dataService信息。我将尝试一些编辑,并会让您知道这是怎么回事。您好,抱歉花了这么长时间。这个项目有点偏离了。我最终使用了$http.get和then函数。
Error: matches is undefined
.link/getMatchesAsync/<@https://web.plank.local/Scripts/ui-bootstrap-tpls-0.10.0.js:3186
qFactory/defer/deferred.promise.then/wrappedCallback@https://web.plank.local/scripts/angular.js:10655
qFactory/defer/deferred.promise.then/wrappedCallback@https://web.plank.local/scripts/angular.js:10655
qFactory/ref/<.then/<@https://web.plank.local/scripts/angular.js:10741
$RootScopeProvider/this.$get</Scope.prototype.$eval@https://web.plank.local/scripts/angular.js:11634
$RootScopeProvider/this.$get</Scope.prototype.$digest@https://web.plank.local/scripts/angular.js:11479
$RootScopeProvider/this.$get</Scope.prototype.$apply@https://web.plank.local/scripts/angular.js:11740
textInputType/listener@https://web.plank.local/scripts/angular.js:15739
jQuery.event.dispatch@https://web.plank.local/scripts/jquery-2.1.0.js:4371
jQuery.event.add/elemData.handle@https://web.plank.local/scripts/jquery-2.1.0.js:4057
aM@https://cdn.qbaka.net/reporting.js:78

https://web.plank.local/scripts/angular.js
Line 9159