61

$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 の方法で正しくまとめるにはどうすればよいでしょうか?

4

5 に答える 5

45

autocomplete ディレクティブを作成し、GitHub にアップロードしました。また、HTTP リクエストからのデータを処理できる必要があります。

ここにデモがあります: http://justgoscha.github.io/allmighty-autocomplete/ そして、ここにドキュメントとリポジトリがあります: https://github.com/JustGoscha/allmighty-autocomplete

promiseしたがって、基本的に、HTTP 要求からデータを取得する場合は を返す必要があり、データが読み込まれると解決されます。$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;
}

これが役立つことを願っています。

于 2013-12-19T17:00:09.973 に答える
37

angular-ui-bootstrap のtypeheadを使用します。

$http と promises を強力にサポートしていました。また、純粋な AngularJS である JQuery はまったく含まれていません。

(私は常に既存のライブラリを使用することを好みます。Issue やプル リクエストを開くための何かが不足している場合は、独自のライブラリを再度作成するよりもはるかに優れています)

于 2013-10-07T14:24:59.353 に答える
0

このリンクは役に立ちました

$scope.loadSkillTags = function (query) {
var data = {qData: query};
   return SkillService.querySkills(data).then(function(response) {
   return response.data;
  });
 };
于 2016-07-12T03:33:50.277 に答える