AngularJS 外部 javascript 库不运行

Question

首先，如果这已经在某处得到回答，我深表歉意。

我遇到了 AngularJS 和外部库的问题。出于某种原因，当我尝试让外部库对元素执行任何类型的可视化操作时，它根本不会运行。

其中一个外部库是 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%)");
            }




        }
        ]

    });
})();

这是包含在此控制器中的模板（包含组件时 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 文档中的示例中解释的那样（老实说，这个颜色选择器的实现应该很简单，我毫不怀疑我做得正确，调用并实施）

具体情况是输入元素是一个简单的文本字段，很像 jscolor 网站上显示的内容。但是，单击该元素并为其赋予焦点不会按预期启动颜色选择器。

这只是我遇到的问题的一个示例，另一个我遇到并且仍然存在的问题是手风琴导航菜单没有动画向下滑动，或者在组件模板内部时根本没有功能。我认为这与角度注入模板的方式有关，但是我想知道是否有人可以帮助我获得更多经验，以向我展示使这些外部库正常工作的正确方法。

由于问题有点复杂，我无法设置 jsfiddle。

感谢您的帮助！

Answer 1

你为什么不试试这个：

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

它完全集成在 Angular 中，不依赖于 jQuery。