AngularJSのコントローラー機能から表示するデータを送信

Question

私はAngularには少し新しく、コントローラからのデータを送信して自分のビューに表示するための重要なステップが欠落していると思います。

私が作成しようとしている機能は、ユーザーが検索条件をフォームに入力して[送信]ボタンをクリックすることです。送信ボタンをクリックするとコントローラの機能（getQuote()）が起動し、API呼び出しが行われ、フォームがリダイレクトされるビューに表示されるAPI応答が返されます。私は私の機能を正常にコンソールに応答を印刷することができましたが、ビューは空白のままです。ここで

は私のコードです：印刷データ

へのビューのための検索フォーム

div(ng-controller="StockCtrl") 
    form(action="/#/stock/quote") 
     div(class="form-group") 
      h3 Enter your stock symbol 
      input(type="text" placeholder="AAPL ..." class="form-control input-lg" ng-model="formData.symbol") 
      br 
      h3 What time period are you interested in? 
      input(type="date" id="startdate" class="form-control input-lg" ng-model="formData.startdate") 
      br 
      button(type="submit" class="btn btn-primary btn-lg" ng-click="getQuote()") Compare 

コントローラ

var stockrControllers = angular.module('stockrControllers', []); 

stockrControllers.controller('StockCtrl', ['$scope', '$http', '$routeParams', 
    function ($scope, $http, $routeParams) { 

    $scope.stockData = []; 
    $scope.formData = []; 

    $scope.getQuote = function(startdate){ 
    var symbol = $scope.formData.symbol; 
    var startdate = new Date($scope.formData.startdate); 
    var startday = startdate.getDate(); 
    var startmonth = startdate.getMonth() + 1; 
    var startyear = startdate.getFullYear(); 
    var enddate = new Date(startdate); 
    enddate.setDate(startday + 5); 
    var endday = enddate.getDate(); 
    var endmonth = enddate.getMonth() + 1; 
    var endyear = enddate.getFullYear(); 

    //format dates to work with API call 
    startdate = startyear + "-" + startmonth + "-" + startday; 
    var enddate = endyear + "-" + endmonth + "-" + endday; 

    $http({ 
     method: 'GET', 
     url: 'api/stock/' + symbol + '/' + startdate + '/' + enddate 
    }).then(function successCallback(response) { 
     $scope.stockData = response; 
     console.log($scope.stockData); 
     }, function errorCallback(response) { 
     console.log('Error:' + response); 
    }); 

    }; 

}]); 

ジェイドテンプレートの

ジェイドテンプレート

h1 Stock Data div(ng-controller="StockCtrl") div(ng-repeat="stock in stockData") p stock data: {{stock}} 

API呼び出しを関数にラップすることなく、代わりにifステートメント（if($scope.formData){..}など）を使用すると、API応答をビューに表示することができます。ただし、呼び出しを関数に入れると、データがページに表示されなくなります。

Answer 1

以下のようにあなたのAPI呼び出しのコードを交換しようとすると、それぞれが、それは$scope自分のしています。それらを1つのdivにマージすると、が表示されます。

div(ng-controller="StockCtrl") 
    form(action="/#/stock/quote") 
     div(class="form-group") 
      h3 Enter your stock symbol 
      input(type="text" placeholder="AAPL ..." class="form-control input-lg" ng-model="formData.symbol") 
      br 
      h3 What time period are you interested in? 
      input(type="date" id="startdate" class="form-control input-lg" ng-model="formData.startdate") 
      br 
      button(type="submit" class="btn btn-primary btn-lg" ng-click="getQuote()") Compare 

    div(ng-repeat="stock in stockData") 
     p stock data: {{stock}} 

Answer 2

response.dataには実際の内容が含まれています。その次の2つの別々のdiv(ng-controller="StockCtrl")宣言した

$http({ 
     method: 'GET', 
     url: 'api/stock/' + symbol + '/' + startdate + '/' + enddate 
    }).then(function successCallback(response) { 
     $scope.stockData = response.data; 
     console.log($scope.stockData); 
     }, function errorCallback(response) { 
     console.log('Error:' + response); 
    });