Question

我对Angular有点新意，我想我错过了从控制器发送数据以便能够在我的视图中显示的关键步骤。

我想要创建的功能是用户将搜索需求输入到表单中并单击提交按钮。单击提交按钮将触发控制器中的一个函数（getQuote()），该函数进行API调用并返回API响应，以便在表单重定向到的视图中显示。我已经能够让我的功能成功打印出对控制台的响应，但视图仍然是空白的。

这是我的代码：

搜索表单的Jade模板

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

response.data包含实际内容。所以请尝试替换您的api呼叫代码，如下所示

$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);
    });

Answer 2

您已声明两个单独的div(ng-controller="StockCtrl")，每个人都有自己的$scope。如果将它们合并为一个div，则$scope.stockData将可见：

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}}

从AngularJS中的控制器功能发送数据以进行查看

2 个答案: