Question

为什么我对chart.js的依赖注入不起作用？详情如下：

我的HTML片段：

    <!DOCTYPE html>
    <html lang="en" ng-app="angularApp">
    <head>
    <meta charset="utf-8">
    <link href="/css/bootstrap.css" rel="stylesheet">
  </head>
  <body>
    <section>
      <div class="container">
          <div class="row">
            <div class="col-md-8">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h3 class="panel-title">Wall</h3>
                </div>
                <div class="panel-body">
                  <div class="form-group">
                    <form>
                      <div class="form-group">
                        <textarea class="form-control" placeholder="Write on the wall"></textarea>
                      </div>
                      <button type="submit" class="btn btn-default">Submit</button>
                    </form>
                  </div>

                  <div ng-controller="wallPosts">
                    <div class="panel panel-default post" ng-repeat="post in posts">
                      <div class="panel-body">
                        <div class="row">
                          <div class="col-sm-2">
                            <a class="post-avatar thumbnail" href="profile.html"><div class="text-center">DevUser1</div></a>
                          </div><!-- col-sm-2 end -->
                          <div class="col-sm-7">
                            <p>test</p>
                          </div>
                          <div class="col-sm-7">
                            <div class="bubble">
                              <div class="pointer">
                                <p>test</p>
                              </div>
                              <div class="pointer-border"></div>
                            </div><!-- buddle end -->
                            <div class="clearfix"></div>
                          </div>
                          <div class="col-sm-3">
                            <canvas id="pie" class="chart chart-pie" chart-data="data" chart-labels="labels" chart-options="options">
                            </canvas> 
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                </div>
              </div>
            </div><!-- col-md-8 end -->
          </div>
      </div>
    </section>

    <!-- Bootstrap core JavaScript-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="/jsLib/bootstrap.js"></script>
    <script src="/jsLib/angular.min.js"></script>
    <script src="/angular/angularApp.js"></script> 
    <script src="/jsLib/angular-chart.js/dist/angular-chart.min.js"></script>
    <script src="/jsLib/chart.js/dist/Chart.min.js"></script>
    <script src="/jsLib/angular-chart.js/dist/angular-chart.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    </script>
  </body>
</html>

角度控制器文件：

var angularApp = angular.module('angularApp', ['chart.js']);

angularApp.controller('wallPosts', ['$scope', 'chart.js', function($scope){

    $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
    $scope.data = [300, 500, 100];

}]);

我得到的错误是：

错误：需要包含Chart.js库，请参阅

http://jtblin.github.io/angular-chart.js/

问题是，我似乎已经完成了链接中所需的内容，但它仍无效。

如果你看到我在这里做错了什么，请告诉我。一天中的大部分时间都把头发拉出来。

谢谢，砂眼

Answer 1

我认为问题出在你在控制器中注入的chart.js。将其从控制器注射中移除然后尝试。

Answer 2

您正在控制器中注入chart.js不正确，请检查以下代码.. 例如：

 angularApp.controller('wallPosts', function($scope){

    $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
    $scope.data = [300, 500, 100];

}]);

更多了解：http://jtblin.github.io/angular-chart.js/

Answer 3

在你的html中包含angularApp.js之前的angular-chart.min.js和Chart.min.js。

并且不需要在控制器参数中包含chart.js.

angularApp.controller('wallPosts', ['$scope', function($scope){

    $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
    $scope.data = [300, 500, 100];

}]);

为什么我的依赖注入不能在Angular中工作？

3 个答案: