2

次のような簡単なアプリを作成しようとしています。1。ユーザーが2つのパラメーターを入力し、ボタンをクリックします。2.AngularがJSONを返す外部JAVAサーブレットを呼び出します。3。アプリがjson文字列を画面に出力します。

しかし、ボタンをクリックしても何も起こらないので、問題があります。（テストのために）これが発生する理由は、呼び出しが非同期であるため、返される変数がnullであるためだと思います。

関連コード：

controllers.js

function myAppController($scope,kdbService) {
    $scope.buttonClick = function(){
        var dat = kdbService.get($scope.tName,$scope.nRows);
        $scope.data = dat;

    }
}

services.js

angular.module('myApp.services', []).factory('kdbService',function ($rootScope,$http){
    var server="http://localhost:8080/KdbRouterServlet";
    return {
        get: function(tname,n){
            var dat;
            $http.jsonp(server+"?query=krisFunc[`"+tname+";"+n+"]&callback=JSON_CALLBACK").
                success(function(data, status, headers, config) {
                    console.log("1");
                    console.log(data);
                    dat=data;
                }).
                error(function(data, status, headers, config) {
                    alert("ERROR: Could not get data.");
                });
            console.log("2");
            console.log(dat);
            return dat;
        }
    }
});

index.html

<!-- Boilerplate-->
<h1>Table Viewer</h1>
<div class="menu" >
    <form>
        <label for="tName">Table Name</label>
        <input id="tName" ng-model="tName"><br>
        <label for="nRows">Row Limit</label>
        <input id="nRows" ng-model="nRows"><br>
        <input type="submit" value="Submit" ng-click="buttonClick()">
    </form>
</div>
{{data}}
<!-- Boilerplate-->

コードを実行してボタンを押しても、何も起こりません。ただし、ログを見ると、次のように表示されます。

2
undefined
1 
Object {x: Array[2], x1: Array[2]}

明らかに、何が起こっているのかというと、get関数が戻った後にsuccess関数が戻ってくるということです。したがって、$ scope.dataに入れられたオブジェクトは未定義ですが、jsonp呼び出しから返されたオブジェクトは残されます。

これを行う正しい方法はありますか？私が見るチュートリアルのほとんどは、success関数内の$ scope変数にデータを割り当て、それによってこの問題をスキップします。可能であれば、サービスを切り離してほしい。

どんな助けでもいただければ幸いです。

4

1 に答える 1

7

私はそのようなことをします：

コントローラ 

function myAppController($scope,kdbService) {
    $scope.kdbService = kdbService;
    $scope.buttonClick = function(){
        $scope.kdbService.get($scope.tName,$scope.nRows);

    }
}

サービス

angular.module('myApp.services', []).factory('kdbService',function ($rootScope,$http){
    var server="http://localhost:8080/KdbRouterServlet";
    return {
        data:{},
        get: function(tname,n){
            var self = this;
            $http.jsonp(server+"?
            query=krisFunc[`"+tname+";"+n+"]&callback=JSON_CALLBACK").
                success(function(data, status, headers, config) {
                    console.log("1");
                    console.log(data);
                    self.data = data;
                }).
                error(function(data, status, headers, config) {
                    alert("ERROR: Could not get data.");
                });
        }
    }
});

html

{{kdbService.data}}

また

getメソッドで継続を使用します：

コントローラ

function myAppController($scope,kdbService) {
    $scope.buttonClick = function(){
        kdbService.get($scope.tName,$scope.nRows,function success(data){
           $scope.data = data;
        });
    }
}

サービス

    get: function(tname,n,successCallback){
        $http.jsonp(server+"?query=krisFunc[`"+tname+";"+n+"]&callback=JSON_CALLBACK").
            success(function(data, status, headers, config) {
                successCallback(data,status,headers,config);
            }).
            error(function(data, status, headers, config) {
                alert("ERROR: Could not get data.");
            });
    }

または$resourceサービスを使用します

http://docs.angularjs.org/api/ngResource。$resource（angular-resourceモジュールが必要です

コードはテストされていません。

可能であれば、サービスを切り離してほしい。

次に、「データプロバイダーサービス」を呼び出す「データサービス」に「データオブジェクト」を配置します。とにかくどこかで「データプロバイダーサービス」を呼び出す必要があります。私の意見では、この問題をスキップすることはできません。これがjavascriptの動作方法だからです。

また使用angular.controller("name",["$scope,"service",function($s,s){}]);

したがって、パラメータが適切に定義および挿入されている限り、パラメータがどのように呼び出されるかを気にする必要はありません。

于 2013-01-22T16:56:29.580 に答える