Внешние javascript-библиотеки AngularJS не запускаются

Question

Прежде всего, я извиняюсь, если это уже где-то ответили.

У меня проблема с AngularJS и внешними библиотеками. По какой-то причине, когда я пытаюсь создать внешнюю заготовку lib для любой визуальной операции над элементом, она просто не запускается.

Одним из таких внешних библиотек является библиотека jscolor которая добавляет очень упрощенно выбора цвета (ссылка на источник: http://jscolor.com)

Вот включать код в моем 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> 

Как вам может видеть, что у меня есть jscolor.min.js, и я могу заверить, что файл есть.

Вот код в относительном компоненте, который содержит входные данные, которые я пытаюсь прикрепить к цвету JS.

(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%)"); 
      } 




     } 
     ] 

    }); 
})(); 

Вот шаблон, который входит в этот контроллер (то, что угловые вызовы, когда компонент включен)

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

Как вы можете видеть, я пытаюсь включить jscolor так же, как они объясняют в примеры в документации jscolor (честно говоря, реализация этого выбора цвета должна быть простой, и я не сомневаюсь, что я делаю это правильно, вызывающий и реализующий это)

Что конкретно происходит с элементом ввода, является простым текстовое поле m как то, что показано на сайте jscolor. Однако щелчок этого элемента и его фокусировка не запускают набор цветов, как ожидалось.

Это всего лишь один из примеров проблем, которые у меня были, другая проблема, которая у меня была и до сих пор есть, - это гармонические навигационные меню, не анимирующие слайд вниз или вообще работающие внутри шаблона компонента. Я думаю, что это имеет какое-то отношение к тому, как угловые шаблоны вводят, однако мне интересно, может ли кто-нибудь помочь мне с большим опытом, чтобы показать мне правильный способ заставить эти внешние библиотеки работать.

Поскольку проблема немного сложнее, я не смог настроить jsfiddle.

Благодарим за помощь!

Answer 1

Почему бы вам не попробовать это:

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

Он полностью интегрирован в угловую без зависимостей на JQuery.