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

为什么我的依赖注入chart.js不起作用？从我的HTML为什么我的依赖注入不能在Angular中工作？

片段：下面详细

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

}]);

我得到的错误是这样的：

Error: Chart.js library needs to included, see

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

事情是，我似乎已经完成了链接中所需的内容，但仍然无法正常工作。

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

感谢，傻眼

来源

2016-07-14 Shayan Khan

我没有看到有关能够将chart.js注入控制器的文档中的任何内容？ –

是的，每个人都在说同一件事。如果你问我哈哈，这很令人尴尬。谢啦！ –

包括角chart.min。 js和Chart.min.js在angularApp.js之前在你的html中。

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

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

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

}]);

来源

2016-07-14 11:22:42

做了这个技巧！我怎么看不到我的错误。非常感谢！ –

我认为这个问题是你在控制注入chart.js之。从控制器注入中删除它然后尝试它。

来源

2016-07-14 11:17:16

这是它交配。谢谢！ –

这不提供问题的答案。要批评或要求作者澄清，请在其帖子下方留言。 - [来自评论]（/ review/low-quality-posts/13005764） – theblindprophet

@theblindprophet由于我的声望低于50，我不被允许在帖子下面评论，所以我在这里写下评论，它确实解决了问题。 –

你在你的控制器注入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/

来源

2016-07-14 11:19:23

做了这个技巧！非常感谢！ –

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

回答

相关问题