5

私のアプリでは、angular.jsとjqueryuiautocompleteを使用しています。ここで説明されているのと同じ問題がありました 。そこで受け入れられた答えは私にとって非常にうまく機能し、値の静的配列を$ httpajax 呼び出しに置き換える必要がある今日までまさに必要でした。$ httpをパラメーターとして親関数に渡そうとしましたが、「不明なプロバイダー：autoCompleteProvider<-autoComplete」が表示されます。

私の質問は、現在のソリューションを書き直したり変更したりせずに$ httpを使用するにはどうすればよいですか？

4

2 に答える 2

12

サービスのgetSource（）関数にコールバック参照を追加する必要があります。

app.factory('autoCompleteDataService', ['$http', function($http) {
   return {
       getSource: function(callback) {
          var url = '...';
          $http.get(url).success(function(data) {
             callback(data);
          }
       }
   }
}]);

サーバーがjsonを返す場合は、$http.jsonpを使用することもできます。その場合は、JSON_CALLBACKパラメーターを忘れないでください。

ディレクティブでは、コールバック関数自体を追加する必要があります。

...
autoCompleteDataService.getSource(function(data) {
   elem.autocomplete({
         source: data
         minLength: 2
   });    
});
于 2012-12-26T20:42:15.560 に答える
0

これがあなたがそれをすることができる方法です：

app.factory('autoCompleteDataService', ['$http', function($http) {
    return {
        getSource: function() {
            return function(request, response) {
                $http.get(url).success(function(data) {
                    response(data);
                });
            }
        }
    }

}]）;

ただし、最初にデータ全体をダウンロードし、オートコンプリートウィジェットがクライアント側でデータを検索できるようにする場合は、次のように実行できます。

app.directive('autoComplete', function(autoCompleteDataService, $http) {
return {
    restrict : 'A',
    link : function(scope, elem, attr, ctrl) {
        autoCompleteDataService.getData(function(err, data) {
            if (err) {
                console.log("Could not retrieve data.");
                return;
            }

            elem.autocomplete({
                minLength: 0,
                source: data,
                focus: function( event, ui ) {
                    elem.val( ui.item.label );
                    return false;
                },
                select: function( event, ui ) {
                    elem.val( ui.item.label );
                    return false;
                }
            })
            .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
                return $( "<li>" )
                .append( "<a>" + item.label + "</a>" )
                .appendTo( ul );
            };
        });
    }
};

}）;

app.factory('autoCompleteDataService', ['$http', '$rootScope', function($http, $scope) {
return {
    getData: function(callback) {
        if ($scope.data) {
            return callback(null, $scope.data);
        }

        $http.get('URL')
        .success(function(data) {
            $scope.data = data;
            return callback(null, data);
        })
        .error(function(data) {
            return callback(true, null);
        });
    }
}

}]）;

于 2013-08-03T15:34:23.833 に答える