试图修复角度js app中的错误 - 无法读取undefined

时间:2015-01-07 03:22:41

标签: angularjs

我很抱歉今晚发布了很多有关角度的信息,但是我在创建我的练习应用程序时遇到了很多麻烦,重要的是我将它运行并在明天创建测试。

几个小时前我已经完成了所有工作,但现在只有{{title}}出现在页面上,我收到错误TypeError:无法读取undefined的属性'labels'。我希望它只是一些我想要的小东西,但我无法看到它我可能会提到的一件事是我从dataRepository重命名了我的服务dataSrv,然后我大部分时间都在编写测试(或者尝试过)但是我没有认为这与它有关。

如果有人可以帮助我变得恐慌。

谢谢!

的index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="ChartApp">
<head>
    <title>Chart.js Trial</title>
    <script type="text/javascript" src="/Scripts/angular/angular.js"></script>
    <script type="text/javascript" src="/Scripts/chartjs/Chart.js"></script>
    <script type="text/javascript" src="/Scripts/angular-chart.js-master/dist/angular-chart.js"></script>

    <script type="text/javascript" src="/Scripts/controller/main-controller.js"></script>
    <script type="text/javascript" src="/Scripts/service/data-service.js"></script>
    <script type="text/javascript" src="/Scripts/directive/color-directive.js"></script>

    <link href="/Scripts/angular-chart.js-master/examples/bootstrap.css" rel="stylesheet" />
    <link href="/Scripts/angular-chart.js-master/dist/angular-chart.css" rel="stylesheet" />
    <link href="StyleSheet.css" rel="stylesheet" />


</head>
<body>

    <div ng-controller="MainCtrl">
        <h1 add-color-header>{{title}}</h1>
        <canvas id="base" class="chart-base" chart-type="type" data="data" labels="labels" legend="true"></canvas>
    </div>
</body>
</html>

数据srv.js

angular.module("ChartApp")
    .factory("dataSrv", function () {
        return {
            labels: ["Reading", "Coding", "Thinking About Coding", "Reddit", "StackOverflow"],
            data: [500, 300, 300, 40, 220],
            type: "PolarArea",
            title: "Angular Chart Expriment"
        };
    });

主controller.js

var app = angular.module("ChartApp", ["chart.js"]);

 app.controller("MainCtrl", ["$scope",
       function ($scope, dataSrv) {
           $scope.labels = dataSrv.labels;
           $scope.data = dataSrv.data;
           $scope.type = dataSrv.type;
           $scope.title = dataSrv.title;
       }
    ]); 

0 个答案:

没有答案