Angularjs $http问题-值可以'；在md autocomplete Angular Material中解决承诺之前，不能返回

我正在我的项目中使用角度材质

md autocomplete

。在这里，我使用

$http

服务通过ajax调用从服务主机获得建议列表

问题：$http问题-在承诺生效之前无法返回值 在md自动完成中解析

我的要求：我需要使用远程数据更新建议列表 md autocompleteAngular Material-Ajax

$http

服务中的源代码

我使用了Angular Material link中提到的方法

源代码：

<md-autocomplete flex required
    md-input-name="autocompleteField"
    md-no-cache="true"
    md-input-minlength="3"
    md-input-maxlength="18"
    md-selected-item="SelectedItem"
    md-search-text="searchText"
    md-items="item in querySearch(searchText)"
    md-item-text="item.country" Placeholder="Enter ID" style="height:38px !important;">
    <md-item-template>
        <span class="item-title">
            <span md-highlight-text="searchText" md-highlight-flags="^i"> {{item.country}} </span>
    </md-item-template>
</md-autocomplete>

场景1:

function LoadAutocomplete(id) {
    var countryList = [];
    $http({
            method: "post",
            url: "https://www.bbminfo.com/sample.php",
            params: {
                token: id
            }
        })
        .then(function (response) {
            countryList = response.data.records;
            return countryList;
        },function () {
            countryList = [];
            return countryList;
        });
}

HTML源代码：

<md-autocomplete flex required
    md-input-name="autocompleteField"
    md-no-cache="true"
    md-input-minlength="3"
    md-input-maxlength="18"
    md-selected-item="SelectedItem"
    md-search-text="searchText"
    md-items="item in querySearch(searchText)"
    md-item-text="item.country" Placeholder="Enter ID" style="height:38px !important;">
    <md-item-template>
        <span class="item-title">
            <span md-highlight-text="searchText" md-highlight-flags="^i"> {{item.country}} </span>
    </md-item-template>
</md-autocomplete>

场景2:

function LoadAutocomplete(id) {
    var countryList = [];
    $http({
            method: "post",
            url: "https://www.bbminfo.com/sample.php",
            params: {
                token: id
            }
        })
        .then(function (response) {
            countryList = response.data.records;
            return countryList;
        },function () {
            countryList = [];
            return countryList;
        });
}

带有AngularJS的HTML源代码：

<md-autocomplete flex required
    md-input-name="autocompleteField"
    md-no-cache="true"
    md-input-minlength="3"
    md-input-maxlength="18"
    md-selected-item="SelectedItem"
    md-search-text="searchText"
    md-items="item in querySearch(searchText)"
    md-item-text="item.country" Placeholder="Enter ID" style="height:38px !important;">
    <md-item-template>
        <span class="item-title">
            <span md-highlight-text="searchText" md-highlight-flags="^i"> {{item.country}} </span>
    </md-item-template>
</md-autocomplete>

要选择的人员：

{{item.country}
未找到与“{searchText}}”匹配的人员。


var-app=angular.module（'myApp'，['ngMaterial']）；
app.controller（'myCtrl'，函数（$scope，$http，$q）{
$scope.searchText=“”；
$scope.Person=[]；
$scope.selectedItem=[]；
$scope.isDisabled=false；
$scope.noCache=false；
$scope.selectedItemChange=函数（项）{
警报（“项目变更”）；
}
$scope.searchTextChange=函数（）{
$http({
方法：“张贴”，
url:“https://www.bbminfo.com/sample.php",
参数：{
令牌：$scope.searchText
}
})
.成功（功能（响应）{
$scope.Person=response.records；
});
}
});

@KevinB-给出了如何实现的想法。我真的很感谢他。。。再次感谢凯文

我得到了我所需要的精确解

源代码是

要选择的国家：

{{item.country}
未找到与“{searchText}}”匹配的人员。


var-app=angular.module（'myApp'，['ngMaterial']）；
app.controller（'myCtrl'，函数（$scope，$http，$q，GetCountryService）{
$scope.searchText=“”；
$scope.Person=[]；
$scope.selectedItem=[]；
$scope.isDisabled=false；
$scope.noCache=false；
$scope.selectedItemChange=函数（项）{
//警报（“项目变更”）；
}
$scope.searchTextChange=函数（str）{
返回GetCountryService.getCountry（str）；
}
});
app.factory（'GetCountryService'，函数（$http，$q）{
返回{
getCountry:函数（str）{
//$http API基于$q服务公开的延迟/承诺API
//因此，默认情况下，它会为我们返回一个承诺
变量url=”https://www.bbminfo.com/sample.php?token=“+str；
返回$http.get（url）
.然后（功能（响应）{
if（type of response.data.records==“object”）{
返回响应、数据、记录；
}否则{
//无效响应
返回$q.reject（响应、数据、记录）；
}
}，功能（回应）{
//出了点问题
返回$q.reject（响应、数据、记录）；
});
}
};
});

为什么不把returncountrylist放在success函数中呢

function LoadAutocomplete(id) {
    var countryList = [];
    $http({
            method: "post",
            url: "https://www.bbminfo.com/sample.php",
            params: {
                token: id
            }
        })
        .success(function (response) {
            countryList = response.records;
            return countryList;
        })
        .error(function (response) {
            countryList = [];
            return countryList;
        });
}

由于.success和.error方法的不推荐而进行编辑：

function LoadAutocomplete(id) {
    var countryList = [];
    $http({
            method: "post",
            url: "https://www.bbminfo.com/sample.php",
            params: {
                token: id
            }
        })
        .then(function (response) {
            countryList = response.data.records;
            return countryList;
        },function () {
            countryList = [];
            return countryList;
        });
}

---

我也为此挣扎了一段时间。基本上，您实际上应该返回一个承诺，返回内容

这是我的“搜索”功能

此外，我不确定您正在运行的angular版本，但我认为。success已被弃用

这是我的md自动完成

<md-autocomplete placeholder="Text goes here"
                 md-selected-item="vm.autocomp"
                 md-search-text="searchText"
                 md-items="item in searchData(searchText)"
                 md-item-text="item">
    <span md-highlight-text="searchText">{{item}}</span>
</md-autocomplete>

{{item}}

编辑1：

---

抱歉，原来的JS是在TypeScript中。现在解决这个问题

标记的答案是正确的

• .then（）-promise API的全部功能，但稍显冗长
• .success（）-不返回承诺，但提供更方便的语法

---

我知道这个傻瓜帮不了你，但它确实是个傻瓜。您试图从异步回调返回，但这是不可能的。相反，您只需返回一个承诺，然后在控制器中使用.then和回调来更新作用域。下面是一个更具体的dupe:和一个相关的github问题：请进行研究。@KevinB-您的链接是用于jQuery的。我承认这个概念是相同的，但在这里是不同的。因为在angularjs中，它调用$scope.apply来默认更新UI，即使在$http服务中也是如此。在中，特别提到了“使用md autocomplete搜索本地或远程数据源中的匹配项”。但对于远程数据源，它不能正常工作。您的第一个解决方案是最接近工作的解决方案。您只需

返回$http（…）

而不是最后的值并删除callback@KevinB请提供解决方案，

.success

和

.error

方法忽略返回值。这就是那些方法被弃用的原因。嗨@georgeawg我刚刚复制了上面的源代码。但是你是对的，这两种方法已经被弃用了。