How to use jQuery in AngularJS

Question

I am trying to use a simple jQuery UI. I have included everything and I have this simple script:

<script> $(function() { $( "#slider" ).slider(); }); </script> 

and

 <div id="slider"></div> 

My includes:

 <script type="text/javascript" src="js/jquery-1.10.2.js"></script> <script type="text/javascript" src="js/jquery-ui-1.10.4.custom.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/ayaSlider.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/angular.min.js"></script> <script type="text/javascript" src="js/angular-route.min.js"></script> <script type="text/javascript" src="js/app.js"></script> 

But when I open the page, there is no slider. According to angular documentation:

If jQuery is available, the angular.element is an alias for the jQuery function. If jQuery is not available, angular.element Angular delegates are a built-in subset of jQuery.

However, I do not understand how to use angular.element , and there is no example.

Update: I managed to create a slider on the screen, but it does not work, I can not change the values ​​or do anything with it.

Answer 1

Ideally, you would put this in a directive, but you can also just put it in a 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(); }); 

Directory 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 the source code of Angular Bootstrap: https://github.com/angular-ui/bootstrap/blob/master/src/tooltip/tooltip.js

You can also use factory to create directives. This gives you maximum flexibility to integrate the services around it and any dependencies you need.

Answer 2

That should work. Please see this script .

 $(function() { $( "#slider" ).slider(); });//Links to jsfiddle must be accompanied by code 

Make sure you load the libraries in the following order: jQuery, jQuery UI CSS, jQuery UI, AngularJS.

Answer 3

You must do the binding in the 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 = '<div class="slider-range"></div>'; 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 an example of a range of sliders made using jQuery UI. Usage example:

 <div slider-range ng-model-left="question.properties.range_from" ng-model-right="question.properties.range_to"></div> 

Answer 4

The best option is to create a directive and wrap the slider functions there. The secret is to use $ timeout, jquery code will only be called when the DOM is ready.

 angular.module('app') .directive('my-slider', ['$timeout', function($timeout) { return { restrict:'E', scope: true, template: '<div id="{{ id }}"></div>', link: function($scope) { $scope.id = String(Math.random()).substr(2, 8); $timeout(function() { angular.element('#'+$scope.id).slider(); }); } }; }] );