Wrapping a jQuery Plugin in an AngularJS Directive

David Boike · 18K views · 2014 · 12:51

Open on YouTube

Web developmenttutorialdated

Why Stack Overflow recommends it

Stack Overflow users link it as a worked example when they need to wrap a jQuery plugin such as Knob, Formstone Wallpaper or sevensegment.js in an AngularJS directive.

Recommended by 0 people across 0 different months, 2015 to 2016.

What it is

A short 2014 AngularJS tutorial by David Boike showing how to wrap the jQuery Knob plugin in a custom AngularJS directive. It is framed as an AngularJS counterpart to a similar EmberJS component screencast.

What people said

Cites soosap · 2015-02 · Stack Overflow · on “Wrapping Formstone Wallpaper jquery plugin in an AngularJS directive”

Trying hard to implement the Formstone Wallpaper [LINK] JQuery plugin into my AngularJS application. I followed the instructions on the site just to learn that AngularJS and JQuery don't work well together. In many articles in the net it was mentioned that I had to wrap jquery plugins in AngularJS directives to use it the right way. I found this tutorial by David Boike [this video] on how to warp the Knob jquery plugin into an AngularJS directive. I tried to follow along and achieve that for the Formstone Wallpaper plugin. This is my attempt: 'use strict'; angular.module('app').directive('formstoneWallpaper',[function() { return { restrict: 'E', link: function (scope, elem, attrs) { elem.wallpape

Cites user1820451 · 2015-05 · Stack Overflow · on “AngularJS with jquery contradict with each other”

I followed this video [this video] to be able to use sevensegment.js jquery plug with angular. the first step was to include jquery before angular even before starting to integrate knob( as the example in the video). but the angular is already does not work. when i added jquery (> 2.1) with angular ? 1.3 i got the expression code instead of the data <script src="js/Angular/angular.js"></script> <!--<script src="js/Angular-route/angular-route.js"></script>--> <script type="text/javascript" src="js/angular-router-ui/angular-ui-router.js"></script> Example: cdata.StartMeasure}} {{cdata.StoppedMeasure}} my target is to use sevensegment.js with angular and i think the way to do it is to build a direct

Cites Nick · 2016-01 · Stack Overflow · on “jQuery knob - Rendering issues”

No not really...i used this plugin before, and then i changed to knob. I know that knob should work in angular, as seen in this video example here: [this video] I'm doing the same thing as he does, but i have decimals and he has not and i cannot figure out why