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

  };

}]);

Jade 模板，用于查看打印数据

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

您已经声明了两个独立的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}}

Answer 2

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