Question

我试图通过角度工厂函数检索json数据，并将数据提供给控制器以创建图表（高图）对象。但是，这给了我一个“参数'工厂函数名''不是函数，得到了未定义的”错误。我的javascript包含一个包含控制器和工厂（如上所述）的角度模块以及一个呈现图表的指令。

我的javascript是：

var app = angular.module('charts', []);

app.directive('highchart', function () {
    return {
        restrict: 'E',
        template: '<div></div>',
        replace: true,
        link: function (scope, element, attrs) {
            scope.$watch(function () {
                return attrs.chart;
            }, function () {
                if (!attrs.chart) return;
                var charts = JSON.parse(attrs.chart);
                $(element[0]).highcharts(charts);
            });
        }
    };
});

app.factory('GetOverSpeedWorstData', function ($scope, $http) {
    $http.get('http://localhost:5155/overspeedworst/OverSpeedworst').success(function (data, status) {
        $scope.score = [];
        for (var i = 0; i < data.length; i++) {
            score.push(data[i].Score);
        }
        $scope.name = [];
        for (var i = 0; i < data.length; i++) {
            name.push(data[i].Name);
        }
    }).error("error message");
    $timeout($scope.fetch, 1000);
});

app.controller('Ctrl', function ($scope, GetOverSpeedWorstData) {
    $scope.name = GetOverSpeedWorstData.name;
    $scope.score = GetOverSpeedWorstData.score;
    $scope.renderChart = {
        chart: {
            type: 'bar'
        },
        xAxis: {
            categories: name
        },
        series: [{
            data: score
        }],
        legend: {
            enabled: false
        }
    };
});

我的HTML是：

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">        
    <head>
        <title>Dashboard Application</title>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script type="text/javascript" src="Scripts/OverSpeedWorstDataServiceApp.js"></script>
        <script type="text/javascript" src="Scripts/DashboardCtrl.js"></script>
        <link rel="stylesheet" type="text/css" href="Dashboard.css">
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <h2>Overspeed (Worst) Scores</h2>
                    <section ng-app="OverSpeedWorstDataServiceApp">
                        <div ng-controller="GetOverSpeedWorstData">
                            <highchart chart='{{renderChart}}'></highchart>
                        </div>
                    </section>
                </td>
                <td>
                     <h2>Overspeed (Best) Scores</h2>
                </td>
            </tr>
            <tr>
                <td>
                     <h2>Vehicle Mileage</h2>
                </td>
                <td>
                     <h2>Servicing Report</h2>
                </td>
            </tr>
        </table>
    </body>
</html>

有关为什么会发生这种情况的任何建议？此外，如果我在控制器中检索数据（相关代码也被粘贴），这将完美运行。

var app = angular.module('charts', []);

app.directive('highchart', function () {
    return {
        restrict: 'E',
        template: '<div></div>',
        replace: true,
        link: function (scope, element, attrs) {
            scope.$watch(function () {
                return attrs.chart;
            }, function () {
                if (!attrs.chart) return;
                var charts = JSON.parse(attrs.chart);
                $(element[0]).highcharts(charts);
            });
        }
    };
});

app.controller('Ctrl', function ($scope, $http, $timeout) {
    $http.get('http://localhost:5155/overspeedworst/OverSpeedworst').success(function (data, status) {
        var score = [];
        for (var i = 0; i < data.length; i++) {
            score.push(data[i].Score);
        }
        var name = [];
        for (var i = 0; i < data.length; i++) {
            name.push(data[i].Name);
        }
        $scope.renderChart = {
            chart: {
                type: 'bar'
            },
            xAxis: {
                categories: name
            },
            series: [{
                data: score
            }],
            legend: {
                enabled: false
            }
        };
    }).error("error message");
    $timeout($scope.fetch, 1000);
});

要添加更多内容，我的json数据的格式为：

[{
    "Name": "A",
    "Score": 900
}, {
    "Name": "B",
    "Score": 846
}, {
    "Name": "C",
    "Score": 757
}, {
    "Name": "D",
    "Score": 321
}, {
    "Name": "E",
    "Score": 222
}]

Answer 1

您的问题不是控制器，而是您使用工厂定义服务的方式：Angularjs - Declaring factory with a single object with a nested array - getting ReferenceError: .... is not defined

你应该做的事情如下：

app.factory('GetOverSpeedWorstData', function ($scope,$http) {
    var r;
    $http.get('http://localhost:5155/overspeedworst/OverSpeedworst').success(function (data, status) {
        stuff, like r = data
    }).error("error message");
     error stuff    
    });

    return {service methods here};

否则你的工厂不会考虑任何因素。它必须返回一些东西。

Answer 2

1）定义服务：

app.factory('GetOverSpeedWorstData',
    function ($resource) {
        var apiPath = 'http://localhost:5155/overspeedworst/OverSpeedworst';
        return $resource(apiPath, {}, {
           'query':  {method:'GET', isArray:true}               
        });
});

2）在控制器中执行此操作

app.controller('Ctrl', function ($scope, $http, $timeout, GetOverSpeedWorstData) {

     $scope.list = new GetOverSpeedWorstData();

     $scope.list.$query(success, error); // or use promise

     function success (data) {
        //data manipulation
     };

     function error (data) {
       //error handling
     }; 
});

3）舞蹈就像没人在看着你一样！

通过角度工厂将数据馈送到控制器

2 个答案: