2

我正在尝试编写一个简单的应用程序，它执行以下操作： 1. 用户输入 2 个参数并单击一个按钮 2. Angular 调用一个返回 JSON 的外部 JAVA Servlet 3. 应用程序将 json 字符串输出到屏幕

但是我有一个问题，因为当我单击按钮时没有任何反应。我相信（由于测试）发生这种情况的原因是由于调用是异步的，因此返回的变量为空。

相关代码：

控制器.js

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

    }
}

服务.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;
        }
    }
});

索引.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 函数返回之后返回。因此放入 $scope.data 的对象是未定义的，但是从 jsonp 调用返回的对象被留下了。

有没有正确的方法可以做到这一点？我看到的大多数教程都将数据分配给成功函数内的 $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 回答