AngularJS externe Javascript-Bibliotheken laufen nicht

Question

Zuerst entschuldige ich mich, wenn dies bereits irgendwo beantwortet wird.

Ich habe ein Problem mit AngularJS und externen Bibliotheken. Aus irgendeinem Grund, wenn ich versuche, eine externe lib-Vorform zu erstellen, wird irgendeine Art von visueller Operation auf einem Element ausgeführt.

Ein solcher externen Bibliotheken ist die jscolor Bibliothek, die eine wirklich simpel Farbauswahl (Quelle Link: http://jscolor.com) fügt

Hier ist der Code sind in meiner index.html:

<link rel="stylesheet" type="text/css" href="app/css/bootstrap.min.css"> 
<link rel="stylesheet" type="text/css" href="app/css/style.css"> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.6/interact.min.js"></script> 

<script src="app/js/lib/jscolor.min.js"></script> 
<script src="app/js/lib/angular.min.js"></script> 
<script src="app/js/lib/bootstrap.min.js"></script> 



<script src="app/js/services/drawCanvas.js"></script> 
<script src="app/js/services/colorpicker.js"></script> 

<script src="app/js/app.module.js"></script> 
<script src="app/js/components/drawableComponent.js"></script> 
<script src="app/js/components/navigationComponent.js"></script> 
<script src="app/js/components/canvasComponent.js"></script> 

Wie Sie kann sehen, dass ich jscolor.min.js enthalten habe und ich kann Ihnen versichern, dass die Datei da ist.

Hier ist der Code in der relativen Komponente, die die Eingabe enthält, an die ich die JS-Farbe anfügen möchte.

(function(){ 
    'use strict'; 

    var app = angular.module('app'); 

    app.component('drawable', { 
     templateUrl: 'app/js/components/drawableComponent.html', 
     controller: ['$rootScope','$scope', function ElementController($rootScope, $scope){ 
      var self = this; 

      $scope.drawables = []; 

      self.$onInit = function() { 
       //$scope.drawables.push("test"); 
      } 

      $scope.addDrawable = function(type, css) { 

       $scope.drawables.push({type:type,css:css}); 
       console.log($scope.drawables); 
      } 


      $rootScope.$on("pushDrawable", function(event, args){ 
       $scope.addDrawable(args.type,args.css); 

      }); 

      self.animateTooltip = function(e) { 
       $(e.target).find(".draggableTooltip").toggle("slow").css("transform", "translateY(-60%)"); 
      } 




     } 
     ] 

    }); 
})(); 

Hier ist die Vorlage, die in diesem Controller enthalten ist (was Winkel Anrufe, wenn die Komponente enthalten ist)

<div class="draggable" ng-repeat="drag in drawables track by $index" style="{{drag.css}}" ng-click="$ctrl.animateTooltip($event)"> 
    <div class="draggableTooltip" style="display:none" >This is a tooltip <input class="jscolor" value="ab2567"></div> 
    <p> You can drag one element </p> 
</div> 

Wie Sie sehen können, ich versuche nur schließen jscolor wie sie erklären, in die Beispiele auf der jscolor-Dokumentation (ehrlich gesagt sollte die Implementierung dieser Farbwähler einfach sein und ich habe keine Zweifel, dass ich es richtig mache, ist das Aufrufen und Implementieren das)

Was passiert speziell ist das Eingabeelement ist ein einfaches Textfeld m Wie auf der Website von jscolor. Wenn Sie jedoch auf dieses Element klicken und ihm den Fokus zuweisen, wird der Farbwähler nicht wie erwartet gestartet.

Dies ist nur ein Beispiel für Probleme, die ich hatte, ein anderes Problem, das ich hatte und immer noch habe, ist Akkordeon Nav Menüs nicht animieren Rutsche nach unten, oder funktionieren überhaupt innerhalb der Vorlage einer Komponente. Ich denke, es hat etwas damit zu tun, wie eckig injiziert Vorlagen, aber ich frage mich, ob jemand mir mit mehr Erfahrung helfen kann, um mir den richtigen Weg zu zeigen, diese externen Bibliotheken zu arbeiten.

Da das Problem ein bisschen komplexer ist, war ich nicht in der Lage, eine jsfiddle einzurichten.

Danke für Ihre Hilfe!

Answer 1

Warum Sie dies nicht versuchen:

https://ruhley.github.io/angular-color-picker/

Es ist voll integriert in Winkel ohne Abhängigkeiten von jQuery.