2

angular factory 関数を使用して json データを取得し、データをコントローラーに供給してチャート (highchart) オブジェクトを作成しようとしています。ただし、これにより、「引数 'Factory Function Name' は関数ではありません。未定義になりました」というエラーが表示されます。私のjavascriptには、チャートをレンダリングするディレクティブとともに、コントローラとファクトリ(前述)を含むAngularモジュールが含まれています。

私の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
}]
4

2 に答える 2

2

あなたの問題はコントローラーではなく、ファクトリーを使用してサービスを定義する方法です:

あなたはおそらく次のようなことをしているはずです：

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

そうでなければ、あなたの工場は何も因数分解していません。何かを返さなければなりません。

于 2013-07-17T10:46:27.503 に答える
0

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)誰も見ていないかのように踊る!

于 2016-08-26T10:40:01.227 に答える