Using jQuery plugin in AngularJs App

Question

I want to use this tinyColorPicker plugin https://github.com/PitPik/tinyColorPicker but it's proving extremely difficult to use it in my angular app.

I keep getting this error:

TypeError: element.colorPicker is not a function

In my index.html

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/tinycolorpicker/lib/jquery.tinycolorpicker.js"></script>

I have then made a directive to instantiate the plugin

'use strict';
angular.module('myApp')
  .directive('colorWheel', function() {
      return {
          restrict: 'A',
          link: function(scope, element) {
              element.colorPicker();
          }
      };
  });

And in my HTML I have this div with the directive

<div id="colorWheel" color-wheel></div>

According to their docs that is all I have to do. I must be missing something key when it comes to integrating it with Angular. Can anyone see anything? Thanks

I think you have to load jQuery to make it work. Did you load it? — Dvir
– Dvir, Commented Nov 26, 2015 at 20:23
Yes! sorry, I have jquery at the top loaded... ill update it — tester123
– tester123, Commented Nov 26, 2015 at 20:27

A Macdonald · Accepted Answer · 2015-11-26 23:47:58Z

2

Element is not a jQuery object, it is an angular object. The plugin is is exposed on the jQuery object. Try using jQuery selectors in your link fn e.g. jQuery("#yourDomId").colorPicker()

answered Nov 26, 2015 at 23:47

A Macdonald

8241 gold badge7 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dvir · Accepted Answer · 2015-11-26 20:30:13Z

1

You have to load jQuery before you loading angularjs.

If you will load jquery after loading angular you will get the jqLite.

<script src="jquery.js"></script>
<sciprt src="angular.js"></script>

answered Nov 26, 2015 at 20:30

Dvir

3,3382 gold badges23 silver badges34 bronze badges

1 Comment

A Macdonald Over a year ago

@tester123 you have loaded it but you are not using it in your link function - you are trying to initialise colorPicker on element - do it on a jquery object instead... $('#myId').colorPicker();

Collectives™ on Stack Overflow

Using jQuery plugin in AngularJs App

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related