爲什麼我的依賴注入不能在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中工作？

回答

相關問題