javascript - 从 AngularJS 中的 Controller 函数发送数据到 View

Question

我对 Angular 有点陌生，我认为我缺少从 Controller 发送数据以便能够在我的 View 中显示的关键步骤。

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

这是我的代码:

搜索表单的 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

Controller

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 响应在 View 中很好。然而，将调用放入函数中会阻止数据到达页面。

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