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 · Accepted 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

<div slider></div>

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.

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

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

[javascript] How to use jQuery in AngularJS

Examples related to javascript

Examples related to jquery

Examples related to angularjs