How to use jQuery in AngularJS

Question

I am trying to use simple jQuery UI  I ve included everything and I have this simple script    lt script gt      function              slider    slider           lt  script gt    and   lt div id  slider  gt  lt  div gt    My includes    lt script type  text javascript  src  js jquery-1 10 2 js  gt  lt  script gt   lt script type  text javascript  src  js jquery-ui-1 10 4 custom min js  gt  lt  script gt   lt script type  text javascript  src  js jquery easing 1 3 js  gt  lt  script gt   lt script type  text javascript  src  js ayaSlider js  gt  lt  script gt   lt script type  text javascript  src  js bootstrap min js  gt  lt  script gt   lt script type  text javascript  src  js angular min js  gt  lt  script gt   lt script type  text javascript  src  js angular-route min js  gt  lt  script gt   lt script type  text javascript  src  js app js  gt  lt  script gt    But when I am opening the page there is no slider  According to documentation of angular      If jQuery is available  angular element is an alias for the jQuery   function  If jQuery is not available  angular element delegates to   Angular s built-in subset of jQuery    However  I don t really understand how can I use angular element and there is no example   Update  I managed to have the slider on the screen but it does not work  I cannot change values or do something with it

User · Answer

This should be working  Please have a look at this fiddle     function             slider    slider         Links to jsfiddle must be accompanied by code   Make sure you re loading the libraries in this order  jQuery  jQuery UI CSS  jQuery UI  AngularJS

User · Answer

The best option is create a directive and wrap the slider features there  The secret is use  timeout  the jquery code will be called only when DOM is ready   angular module  app    directive  my-slider           timeout   function  timeout            return               restrict  E               scope  true              template    lt div id     id     gt  lt  div gt                link  function  scope                     scope id   String Math random    substr 2  8                     timeout function                         angular element      scope id  slider

User · Answer

You have to do binding in a directive  Look at this   angular module  ng        directive  sliderRange   function  parse   timeout       return           restrict   A           replace  true          transclude  false          compile  function element  attrs                            var html     lt div class  slider-range  gt  lt  div gt                var slider     html               element replaceWith slider               var getterLeft    parse attrs ngModelLeft   setterLeft   getterLeft assign              var getterRight    parse attrs ngModelRight   setterRight   getterRight assign               return function  scope  slider  attrs  controller                    var vsLeft   getterLeft scope   vsRight   getterRight scope   f   vsLeft    0  t   vsRight    10                                           var processChange   function                         var vs   slider slider  values    f   vs 0   t   vs 1                                                               setterLeft scope  f                       setterRight scope  t                                                                          slider slider                       range  true                      min  0                      max  10                      step  1                      change  function     setTimeout function      scope  apply processChange      1                       slider  values    f  t                                                                          This shows you an example of a slider range  done with jQuery UI  Example usage    lt div slider-range ng-model-left  question properties range from  ng-model-right  question properties range to  gt  lt  div gt

User · Answer

Ideally you would put that in a directive  but you can also just put it in the controller  http   jsfiddle net tnq86 15     angular module  App            controller  AppCtrl   function   scope            scope model   0          scope initSlider   function                  function                     wait till load event fires so all resources are available                scope  slider       slider   slider                     slide   scope onSlide                                             scope onSlide   function  e  ui                  scope model   ui value                scope  digest                                  scope initSlider            The directive approach   HTML   lt div slider gt  lt  div gt    JS    angular module  App            directive  slider   function  DataModel          return            restrict   A            scope  true           controller  function   scope   element   attrs                 scope onSlide   function  e  ui                   scope model   ui value                   or set it on the model                  DataModel model   ui value                   add to angular digest cycle                scope  digest                                        link  function  scope  el  attrs                 var options                   slide  scope onSlide                                  set up slider on load             angular element document  ready function                    scope  slider     el  slider options                                              I would also recommend checking out Angular Bootstrap s source code  https   github com angular-ui bootstrap blob master src tooltip tooltip js  You can also use a factory to create the directive  This gives you ultimate flexibility to integrate services around it and whatever dependencies you need

[javascript] How to use jQuery in AngularJS

Examples related to javascript

Examples related to jquery

Examples related to angularjs