Question

我在使用getCurveData（曲线）将新系列推送到chartConfig.series并查看UI中反映的更改时遇到问题。数据确实被推入列表（我可以在调试中看到），但更改不会反映在UI中。但是，如果我单击链接到addSeries（）的按钮，则会在UI上添加并显示一系列。我对角度很新，我肯定错过了一些基本的东西。以下是我的表格和我的应用程序。任何帮助将不胜感激。谢谢！

<form role="form" ng-submit="getCurveData(curve)" ng-controller="myctrl">
    <div class="col-xs-2">
        <label for="curveName">Curve Type</label>
        <select class="form-control" ng-model="curve.type">
            <option>Hpi</option>
            <option>Unemployment</option>
            <option>Credit Availability</option>
        </select>
    </div>
    <div class="col-xs-2">
        <label for="curveDate">Base Date</label>
        <input type="text" class="form-control" ng-model="curve.date">
    </div>
    <div class="col-xs-3">
        <label for="frequency">Frequency</label>
        <select class="form-control" id="frequency" ng-model="curve.frequency">
        <option>Daily</option>
        <option>Monthly</option>
        <option>Yearly</option>
        </select>
    </div>
    <div class="col-xs-3">
        <label for="source">Source</label>
        <select class="form-control" id="source" ng-model="curve.source">
            <option>Credit Committee</option>
            <option>Moodys</option>
            <option>S&amp;P</option>
        </select>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

使用Javascript：

var myapp = angular.module('myapp', ["highcharts-ng"]);

myapp.controller('myctrl', function ($scope, $http) {

$scope.getCurveData = function (curve) {    
    $http.get('MacroCurveService/' + curve.source + '/' + curve.type + '/' + curve.date + '/' + curve.frequency).success(function(curveData) {
        $scope.chartConfig.series.push({
            data: curveData.values
        });     
    });         
};

$scope.addPoints = function () {
    var seriesArray = $scope.chartConfig.series
    var rndIdx = Math.floor(Math.random() * seriesArray.length);
    seriesArray[rndIdx].data = seriesArray[rndIdx].data.concat([1, 10, 20])
};

$scope.addSeries = function () {
    var rnd = []
    for (var i = 0; i < 10; i++) {
        rnd.push(Math.floor(Math.random() * 20) + 1)
    }
    $scope.chartConfig.series.push({
        data: rnd
    });
};

$scope.removeRandomSeries = function () {
    var seriesArray = $scope.chartConfig.series
    var rndIdx = Math.floor(Math.random() * seriesArray.length);
    seriesArray.splice(rndIdx, 1)
};

$scope.toggleLoading = function () {
    this.chartConfig.loading = !this.chartConfig.loading
};

$scope.chartConfig = {
    options: {
        chart: {
            type: 'line',
            zoomType: 'x', backgroundColor:'rgba(255, 255, 255, 0.1)'
        }
    },
    series: [{
        /* data: [10, 15, 12, 8, 7, 1, 1, 19, 15, 10] */
        data: [10, 15, 12, 8, 7, 1, 1, 19, 15, 10]
    }],
    title: {
        text: 'Hello'
    },
    xAxis: {currentMin: 0, currentMax: 10, minRange: 1},
    loading: false
};

});

如果我在如下所示的apply语句中包含getCurveData调用，那么我将收到“错误：$ digest已在进行中”

$scope.getCurveData = function (curve) {    
    $http.get('MacroCurveService/' + curve.source + '/' + curve.type + '/' + curve.date + '/' + curve.frequency).success(function(curveData) {
        $scope.$apply(function () {
            $scope.chartConfig.series.push({
                data: curveData.values
            }); 
        });
    });         
};

Answer 1

我已经将控制器两次声明，一次在表单上，一次在div上面。将其从表单中删除就可以了。

Answer 2

documentation for $http说：

 The response object has these properties:

    data – {string|Object} – The response body transformed with the transform functions.
    status – {number} – HTTP status code of the response.
    headers – {function([headerName])} – Header getter function.
    config – {Object} – The configuration object that was used to generate the request.

因此，我认为success函数应为：

$scope.getCurveData = function (curve) {    
  $http.get('MacroCurveService/' + curve.source + '/' + curve.type + '/' + curve.date + '/' + curve.frequency).success(function(curveData) {
    $scope.chartConfig.series.push({
        data: curveData.data.values
    });     
  });         
};

角度范围不更新

2 个答案: