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

Send data to view from controller function in AngularJS

本文关键字：数据 AngularJS 控制器 功能      更新时间：2023-09-26

我对 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 响应。但是，将调用放在函数中会阻止数据进入页面。

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

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);
    });
相关文章：