AngularJS在POST http请求上更新模型/视图

AngularJS update model/view on POST http request

本文关键字：更新模型视图请求 POST http AngularJS 更新时间：2023-09-26

我知道有很多类似的问题——我是AngularJS的新手，在数据绑定方面很吃力。我已经用本地模型和控制器做了一些简单的例子，但现在正试图扩展到使用REST服务并从控制器中分离服务。我觉得我应该在创建结束时更新我的模型$forecastData变量，这样它就可以绑定回屏幕，但我无法从服务访问。数据是从帖子中成功创建的，如果我刷新浏览器，数据就会正确显示——我只希望屏幕更新能自动进行。

我的屏幕是这样的：

<!DOCTYPE html>
<html ng-app="MeterApp">
  <head>
  <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"></script>     
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
    <script src="https://rawgit.com/krispo/angular-nvd3/v1.0.4/dist/angular-nvd3.js"></script>  
    <script type="text/javascript" src="app.js"></script>
  </head>
  <body class="container">
    <div class="panel panel-primary" ng-controller="ForecastFormController"  ng-init="getData()">
        <div class="panel-heading">Forecast Data</div>
        <div class="panel-body">
            <table class="table table-bordered table-hover">
            <tr>
                <th>Forecast Date</th>
                <th>Value (kWh)</th>
            <tr ng-repeat="forecast in forecastData"">
              <td>{{forecast.forecast_date}}</td>
              <td>{{forecast.value_kwh}}</td>
            </tr>  
            </table>            
        </div>
    </div>
    <div class="panel panel-primary  col-lg-4" ng-controller="ForecastFormController">
        <div class="panel-heading">Add Forecast</div>
        <div class="panel-body">
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <label for="forecast-date">Forecast Date:</label>
                    <input class="form-control" id="forecast-date" ng-model="forecast.forecast_date">
                    <br>
                    <label for="forecast-value">Forecast Value (KwH):</label>
                    <input class="form-control" id="forecast-value" ng-model="forecast.value_kwh">
                    <br>
                    <button type="submit" class="btn btn-default" ng-click="create()">Submit</button>
                </div>
            </form> 
        </div>
    </div>
  </body>
</html>

服务/控制器为：

app.service('forecastDataService', function($http) {
    this.getData = function() {
        return $http({
            method: 'GET',
            url: 'http://localhost:51437/api/forecasts'
         });
    }
    this.addData = function(f){
        return $http({
            method: 'POST',
            url: 'http://localhost:51437/api/forecasts',
        });
    }   
});
app.controller('ForecastFormController', function($scope, forecastDataService) {
    /*  $scope.forecastData = [ {"id":1,"value_kwh":1000.0,"forecast_date":"2015-11-27T00:00:00"},{"id":2,"value_kwh":1000.0,"forecast_date":"2015-11-28T00:00:00"},{"id":4,"value_kwh":1000.0,"forecast_date":"2015-11-29T00:00:00"}]; */
    $scope.forecastData = null;
    $scope.foreast = {};
    $scope.getData = function(){
        forecastDataService.getData().then(function(dataResponse) {
            $scope.forecastData = dataResponse.data;
            console.dir($scope.forecastData);
            return $scope.forecastData;
        });                     
    }
    $scope.create = function(){    
        console.dir("Called create method with: " + $scope.forecast.value_kwh + ":" + $scope.forecast.forecast_date);
        forecastDataService.addData($scope.forecast).then(function(dataResponse) {
                        console.dir("Success - data response: " + dataResponse.data);
                        });     
    }   
})

您可以从服务返回一个对象，当您想要刷新数据时，只需调用刷新函数，如：

app.service('forecastDataService', function($http) {
    var data = {
         forecast: {}
    };
    this.getData = function() {
        return data;
    }
    this.refreshData = function(f){
        $http({
            method: 'POST',
            url: 'http://localhost:51437/api/forecasts',
        }).then(unction(dataResponse) {
           data.forecast = dataResponse.data;
        });
    }   
});

使用控制器中的服务：

$scope.forecastData = forecastDataService.getData();

从服务器获取最新数据并更新以查看

forecastDataService.refreshData();

非常感谢您的回答。在看了angular js的启动和运行之后，显而易见（最简单的方法似乎是如下重构）：

服务：

    app.service('forecastService', ['$http', function($http) {
    return{
        get: function(){
            return $http.get('http://localhost:51437/api/forecasts');
            },
        create: function(data){
            return $http.post('http://localhost:51437/api/forecasts', data)
            }
    };
}]);

控制器：

app.controller('ForecastController', ['forecastService', function(forecastService) {
    /*  $scope.forecastData = [ {"id":1,"value_kwh":1000.0,"forecast_date":"2015-11-27T00:00:00"},{"id":2,"value_kwh":1000.0,"forecast_date":"2015-11-28T00:00:00"},{"id":4,"value_kwh":1000.0,"forecast_date":"2015-11-29T00:00:00"}]; */
    var self = this
    self.forecastData = [];
    self.newForecast = {};
    var getData = function(){
        return forecastService.get().then(
            function(response){
                self.forecastData  = response.data;
            }, function(errResponse){
                console.error('Error while fetching data: ');
                console.error(errResponse);
            });
    };
    getData();
    self.create = function(){    
        forecastService.create(self.newForecast)
            .then(getData)
            .then(function(response){
                self.newForecast = {};
            }); 
    };  
}]);