Warum funktioniert meine Abhängigkeitsinjektion nicht in Angular?

Warum funktioniert meine Dependency Injection für chart.js nicht? Details unter:Warum funktioniert meine Abhängigkeitsinjektion nicht in Angular?

Snippet von meinem 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>

Winkelregler Datei:

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

}]);

Der Fehler Ich erhalte, ist dies:

Error: Chart.js library needs to included, see

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

Die Sache ist, ich habe genau das getan, was in dem Link benötigt wird und es funktioniert immer noch nicht.

Wenn Sie sehen, was ich hier falsch mache, lassen Sie es mich bitte wissen. Zieh mir die Haare fast den ganzen Tag lang aus.

Danke, Shayan

Quelle

2016-07-14 Shayan Khan

Ich sehe nichts in der Dokumentation über die Möglichkeit, chart.js in einen Controller zu injizieren? –

Ja, jeder sagt das Gleiche. Ziemlich peinlich, wenn du mich fragst, haha. Danke, Mann! –

Fügen Winkel chart.min. js und Chart.min.js vor angularApp.js in Ihrem HTML.

Und es ist nicht notwendig, chart.js in Controller-Parameter aufzunehmen.

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

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

}]);

Quelle

2016-07-14 11:22:42

Das war der Trick Kumpel! Wie ich den Fehler nicht gesehen habe, ist mir ein Rätsel. Vielen Dank dafür! –

denke ich, das Problem mit dem chart.js ist, dass Sie in der Steuerung injiziert haben. entfernen Sie es aus der Controller-Injektion und versuchen Sie es dann.

Quelle

2016-07-14 11:17:16

Das hat es geheiratet. Vielen Dank! –

Dies liefert keine Antwort auf die Frage. Um einen Autor zu kritisieren oder um Klärung zu bitten, hinterlasse einen Kommentar unter seinem Beitrag. - [Aus Bewertung] (/ review/low-quality-posts/13005764) – theblindprophet

@theblindprophet Ich durfte unterhalb des Posts keinen Kommentar abgeben, da mein Ruf weniger als 50 war. Also schreibe ich den Kommentar hier und es löst das Problem. –

Ihre chart.js in Ihrem Controller injizieren nicht korrekt ist, überprüfen Sie bitte den Code unten .. ZB:

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

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

}]);

Für mehr Verständnis: http://jtblin.github.io/angular-chart.js/

Quelle

2016-07-14 11:19:23

Das war der Trick Kumpel! Vielen Dank! –

Warum funktioniert meine Abhängigkeitsinjektion nicht in Angular?

Antwort

Verwandte Themen