首先，如果这件事已经在某个地方得到了答复，我真的很抱歉。
我对AngularJS和外部libs有意见。出于某种原因，当我试图让外部lib对元素执行任何类型的可视化操作时，它根本不运行。
其中一个外部库是jscolor库，它添加了一个非常简单的颜色选择器（源链接：http://jscolor.com）
下面是my 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%)");
}
}
]
});
})();
这是这个控制器中包含的模板（当包含组件时，angular调用什么）
<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文档的示例中所解释的那样（老实说，这个颜色选择器的实现应该很简单，我毫不怀疑我做得对，调用和实现就是这样）
具体发生的是，input元素是一个简单的文本字段，与jscolor站点上显示的非常类似。但是，单击该元素并给予其焦点不会按预期启动颜色选择器。
这只是我遇到过的问题的一个例子，另一个我已经遇到并且仍然存在的问题是手风琴导航菜单不动画向下滑动，或者在组件模板内完全起作用。我认为这与angular如何注入模板有关，但是我想知道是否有人能帮助我获得更多的经验，告诉我如何让这些外部库正常工作。
由于问题稍微复杂一点，我无法设置jsfiddle。
谢谢你的帮助！
最佳答案
你为什么不试试这个：
https://ruhley.github.io/angular-color-picker/
它完全集成在angular中，不依赖jQuery。