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文档中的示例中解释一样（老实说，这个颜色选择器的实现应该很简单，我毫不怀疑我正确地做了，调用并实施那是）

具体发生的是输入元素是一个简单的文本字段，就像jscolor网站上显示的那样。但是，单击该元素并使其聚焦不会按预期启动颜色选择器。

这只是我遇到的问题的一个例子，我已经拥有的另一个问题是手风琴导航菜单不会动画向下滑动，或者在组件模板内部完成功能。我认为它与角度注入模板有关，但是我想知道是否有人可以帮助我获得更多经验，以向我展示让这些外部库工作的正确方法。

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

感谢您的帮助！

Answer 1

为什么不试试这个：

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

它完全集成在角度而不依赖于jQuery。

AngularJS外部JavaScript库不运行

1 个答案: