通过角工厂数据馈送到控制器 [英] Feeding the data through an angular factory to a controller

查看：165
本文介绍了通过角工厂数据馈送到控制器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图通过一个角工厂函数来检索JSON数据并将该数据供给到控制器以创建图表（highchart）对象。然而，这给了我一个参数工厂函数名称'是不是一个函数，得到了未定义错误。我的JavaScript包括含有控制器和工厂（如提及）与渲染图的指示沿角模块。

我的JavaScript是：

VAR应用= angular.module（图表，[]）;app.directive（'highchart'，函数（）{
    返回{
        限制：'E'，
        模板：'＆LT; D​​IV＆GT;＆LT; / DIV＆GT;，
        更换：真实，
        链接：功能（范围，元素，ATTRS）{
            范围。$表（函数（）{
                返回attrs.chart;
            }，函数（）{
                如果回报（attrs.chart！）;
                VAR图表= JSON.parse（attrs.chart）;
                $（元素[0]）highcharts（图表）。
            }）;
        }
    };
}）;app.factory（'GetOverSpeed​​WorstData'，函数（$范围，$ HTTP）{
    $ http.get（的http：//本地主机：5155 / overspeedworst / OverSpeed​​worst'）.success（功能（数据，状态）{
        $ scope.score = [];
        对于（VAR I = 0; I＆LT; data.length;我++）{
            score.push（数据[I] .Score）;
        }
        $ scope.name = [];
        对于（VAR I = 0; I＆LT; data.length;我++）{
            name.push（数据[I] .Name点）;
        }
    }）错误（错误消息）;
    $超时（$ scope.fetch，1000）;
}）;app.controller（Ctrl键，功能（$范围，GetOverSpeed​​WorstData）{
    $ scope.name = GetOverSpeed​​WorstData.name;
    $ scope.score = GetOverSpeed​​WorstData.score;
    $ scope.renderChart = {
        图：{
            类型：'棒'
        }，
        X轴：{
            类别：名称
        }，
        系列：[{
            数据：得分
        }]，
        传说：{
            启用：假的
        }
    };
}）;

和我的HTML是：

＆LT;！DOCTYPE＆GT;
＆LT; HTML的xmlns =htt​​p://www.w3.org/1999/xhtml＆GT;
    ＆LT; HEAD＆GT;
        ＆LT;标题＆GT;仪表盘应用与LT; /标题＆GT;
        ＆所述; SCRIPT SRC =htt​​p://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js＆GT;＆下; /脚本＆GT;
        ＆所述; SCRIPT SRC =htt​​p://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js＆GT;＆下; /脚本＆GT;
        ＆所述; SCRIPT SRC =HTTP：//$c$c.highcharts.com/highcharts.js＆GT;＆下; /脚本＆GT;
        ＆LT;脚本类型=文/ JavaScript的SRC =脚本/ OverSpeed​​WorstDataServiceApp.js＆GT;＆LT; / SCRIPT＆GT;
        ＆LT;脚本类型=文/ JavaScript的SRC =脚本/ DashboardCtrl.js＆GT;＆LT; / SCRIPT＆GT;
        ＆LT;链接rel =stylesheet属性类型=文/ CSS的href =Dashboard.css＆GT;
    ＆LT; /头＆GT;
    ＆LT;身体GT;
        ＆LT;表＆gt;
            ＆所述; TR＆GT;
                ＆所述; TD＆GT;
                    ＆LT; H2＆GT;超速（最差）比分＆LT; / H＆GT;
                    ＆lt;节NG-应用=OverSpeed​​WorstDataServiceApp＆GT;
                        ＆LT; D​​IV NG控制器=GetOverSpeed​​WorstData＆GT;
                            ＆LT; highchart图='{{renderChart}}'＆GT;＆LT; / highchart＆GT;
                        ＆LT; / DIV＆GT;
                    ＆LT; /节＆gt;
                ＆LT; / TD＆GT;
                ＆所述; TD＆GT;
                     ＆LT; H2＆GT;超速（最佳）比分＆LT; / H＆GT;
                ＆LT; / TD＆GT;
            ＆LT; / TR＆GT;
            ＆所述; TR＆GT;
                ＆所述; TD＆GT;
                     ＆LT; H2＆GT;车辆里程＆LT; / H＆GT;
                ＆LT; / TD＆GT;
                ＆所述; TD＆GT;
                     ＆LT; H2＆GT;维修报告＆LT; / H＆GT;
                ＆LT; / TD＆GT;
            ＆LT; / TR＆GT;
        ＆LT; /表＆gt;
    ＆LT; /身体GT;
＆LT; / HTML＆GT;

这是为什么会这样有什么建议？此外，如果我检索控制器内的数据（相关code粘贴以及）这个运行完美。

VAR应用= angular.module（图表，[]）;app.directive（'highchart'，函数（）{
    返回{
        限制：'E'，
        模板：'＆LT; D​​IV＆GT;＆LT; / DIV＆GT;，
        更换：真实，
        链接：功能（范围，元素，ATTRS）{
            范围。$表（函数（）{
                返回attrs.chart;
            }，函数（）{
                如果回报（attrs.chart！）;
                VAR图表= JSON.parse（attrs.chart）;
                $（元素[0]）highcharts（图表）。
            }）;
        }
    };
}）;app.controller（Ctrl键，功能（$范围，$ HTTP，$超时）{
    $ http.get（的http：//本地主机：5155 / overspeedworst / OverSpeed​​worst'）.success（功能（数据，状态）{
        变种评分= [];
        对于（VAR I = 0; I＆LT; data.length;我++）{
            score.push（数据[I] .Score）;
        }
        变量名称= [];
        对于（VAR I = 0; I＆LT; data.length;我++）{
            name.push（数据[I] .Name点）;
        }
        $ scope.renderChart = {
            图：{
                类型：'棒'
            }，
            X轴：{
                类别：名称
            }，
            系列：[{
                数据：得分
            }]，
            传说：{
                启用：假的
            }
        };
    }）错误（错误消息）;
    $超时（$ scope.fetch，1000）;
}）;

要添加更多的，我的JSON数据的格式为：

[{
    名称：A，
    得分：900
}，{
    名称：B
    得分：846
}，{
    名称：C，
    得分：757
}，{
    名称：D，
    得分：321
}，{
    名称：E，
    得分：222
}]


解决方案

您的问题不是控制器，但你定义服务的方式，用一个工厂：<一href=\"http://stackoverflow.com/questions/17550895/angularjs-declaring-factory-with-a-single-object-with-a-nested-array-getting/17551246#17551246\">Angularjs - 工厂声明与一个嵌套数组单个对象 - 获得的ReferenceError：......是不是

定义

您或许应该做一些这样的：

  app.factory（'GetOverSpeed​​WorstData'，函数（$范围，$ HTTP）{
    VAR  -  [R;
    $ http.get（的http：//本地主机：5155 / overspeedworst / OverSpeed​​worst'）.success（功能（数据，状态）{
        的东西，如R =数据
    }）错误（错误消息）;
     错误的东西
    }）;    返回{这里服务的方法};

否则你的工厂没有任何保理。它返回的东西。

I am trying to retrieve json data through an angular factory function and feeding the data to a controller to create a chart (highchart) object. However, this gives me a "Argument 'Factory Function Name' is not a function, got undefined" error. My javascript contains an angular module containing a controller and factory (as mentioned) along with a directive which renders the chart.

My javascript is:

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

and my HTML is:

<!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>

Any advice on why is this happening? Moreover, this runs perfectly if I retrieve the data within the controller (the related code is pasted as well).

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

To add more, my json data is of the form:

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

解决方案

Your problem is not the controller but the way you define the service, with a factory: Angularjs - Declaring factory with a single object with a nested array - getting ReferenceError: .... is not defined

You should probably be doing something like:

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

otherwise your factory is not factoring anything. it has to return something.

这篇关于通过角工厂数据馈送到控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆