AngularJS外部のjavascriptライブラリは実行されません

Question

これはすでにどこかで答えられている場合、まず謝ります。

AngularJSと外部ライブラリに問題があります。何らかの理由で、外部のlibプリフォームに要素の視覚的な操作を何らかの形でプッシュしようとすると、単に実行されません。そのような外部ライブラリの

一つ本当に単純なカラーピッカー（ソースリンク：http://jscolor.com）を追加jscolorライブラリされています。あなたのよう

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

ここ

は私のindex.html内のコードが含まれています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のサイトに表示されているようなものです。ただし、その要素をクリックしてフォーカスを移動しても、カラーピッカーは正常に起動しません。

これは私が持っていた問題の1つの例であり、私が持っていたもう1つの問題は、アコーディオンのナビゲーションメニューではスライドを動かすことができないか、コンポーネントのテンプレートの内部で機能しています。私はそれは角がどのようにテンプレートを注入するかと関係があると思いますが、私はこれらの外部ライブラリを正しく動作させる正しい方法を示すために誰かが私を助けてくれるのかと疑問に思っています。

問題はもっと複雑なので、私はjsfiddleをセットアップできませんでした。

ありがとうございました！

Answer 1

なぜあなたはこれを試してみません：

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

それは完全にjQueryのへの依存せずに、角に統合されています。