一尘不染

AngularJS从$ http自动完成

angularjs

我正在尝试编写一个自动完成指令,该指令使用$ http请求 (不使用任何外部插件或脚本)
从服务器获取数据。当前,它仅适用于静态数据。现在,我知道我需要将我的$ http请求插入source:指令的中,但是我找不到关于该主题的任何好的文档。

http请求

$http.post($scope.url, { "command": "list category() names"}). 
            success(function(data, status) {
                $scope.status = status;
                $scope.names = data;    
            })
            .
            error(function(data, status) {
                $scope.data = data || "Request failed";
                $scope.status = status;   
            });

指示

app.directive('autoComplete', function($timeout) {
    return function(scope, iElement, iAttrs) {
            iElement.autocomplete({
                source: scope[iAttrs.uiItems],
                select: function() {
                    $timeout(function() {
                      iElement.trigger('input');
                    }, 0);
                }
            });
        };
    });

视图

<input auto-complete ui-items="names" ng-init="manualcat='no category entered'" ng-model="manualcat">

那么,如何将这些正确地按Angular方式拼凑在一起?


阅读 202

收藏
2020-07-04

共1个答案

一尘不染

我做了一个自动完成指令,并将其上传到GitHub。它还应该能够处理来自HTTP请求的数据。

这里是演示:http :
//justgoscha.github.io/allmighty-
autocomplete/

这里是文档和存储库:https :
//github.com/JustGoscha/allmighty-
autocomplete

因此,基本上,promise当您想从HTTP请求中获取数据时,必须返回a
,而在加载数据时就可以解决该问题。因此,您必须$q在发出HTTP请求的位置注入服务/指令/控制器。

例:

function getMyHttpData(){
  var deferred = $q.defer();
  $http.jsonp(request).success(function(data){
    // the promise gets resolved with the data from HTTP
    deferred.resolve(data);
  });
  // return the promise
  return deferred.promise;
}

我希望这有帮助。

2020-07-04