2016-04-07 19 views
0

入力ボックスとボタンを使用して、クエリ用の簡単なページを作成したかったのです。ここに私のHTMLは次のとおりです。NG-クリックイベントsearchById()を処理するためのAngularJS:httpリクエストで何も返されません

<html ng-app="cgApp" > 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 
    <script src="../js/controller.js"></script> 
    <script src="../js/service.js"></script> 

    </head> 
    <body> 
    <div ng-controller="CgseqCtrl"> 
     <input ng-model="analysisid"><button ng-click="searchById()">Search</button> 
     <table> 
      <tr> 
       <td>{{seq.analysisId}}</td> 
       <td>{{seq.center}}</td> 
       <td>{{seq.diseaseAbbr}}</td> 
       <td>{{seq.filepath}}</td> 
       <td>{{seq.library}}</td> 
      </tr> 
     </table> 

    </div> 

    </body> 
</html> 

機能が私のcontroller.jsで実装されて

var app = angular.module('cgApp', []) 

app.controller('CgseqCtrl', ['$scope', 'Cgseq', function($scope, Cgseq){ 
    $scope.searchById = function() { 
     Cgseq.getSeqById($scope.analysisid) 
     .then(function(response){ 
      $scope.seq = response; 
     }, function errorCallBack(response) { 
      console.log(response.$statusText); 
     }); 
    } 
}]); 

Cgseqはservice.jsで私の工場の名前です。

app.factory("Cgseq", function ($http) { 
    // return $resource('http://localhost:8080/cgweb/api/seqs/fdebfd6e-d046-4192-8b97-ac9f65dc2009'); 
    var service = {}; 
    service.getSeqById = function(analysisid) { 
     return $http.get('http://localhost:8080/cgweb/api/seqs/' + analysisid); 
    } 
    return service; 
}); 

basic.htmlを読み込むと、クエリの文字列を入力してボタンをクリックすると、ページに何も表示されません。私はステップバイステップでデバッグしようとしましたが、それは.thenまたはfunction errorCallBackに決して入らないことが判明しました。 node.jsサーバーまたはtomcatサーバーのログからは何も疑わしいとは思われません。私は何を間違えたのですか?

EDIT#1:サーバーへの接続は、(200)良いですのようなネットワークの状態に基づいて

、それが見えます。 network tab

+0

サーバーは実際に要求を受け取りますか?もしそうなら、ブラウザのWebインスペクタの[ネットワーク]タブには何が表示されますか? –

+0

デベロッパーコンソール – war1oc

+0

@SunilDのネットワークコールを確認してください。私はネットワークタブのスクリーンショットをアップロードしました。一番下の行は、サーバーがリクエストを受信したことを示しています。 – ddd

答えて

1
Cgseq.getSeqById($scope.analysisid) 
     .then(function(response){ 
      $scope.seq = response.data; // You have to use response.data 
     }, function errorCallBack(response) { 
      console.log(response.$statusText); 
     }); 

参考:https://docs.angularjs.org/api/ng/service/ $ HTTP

あなたは、その後にconsole.log(response)を行う場合は、レスポンスオブジェクトの構造を見ることができるコールバック。

関連する問題