如何在AngularJS中使用jQuery

我正在尝试使用简单的jQuery UI。 我已经包括了一切，我有这个简单的脚本：

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

和

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

我包括：

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

但是，当我打开页面没有滑块。 根据angular的文件：

如果jQuery可用，angular.element是jQuery函数的别名。 如果jQuery不可用，angular.element委托给Angular的jQuery内置子集。

但是，我真的不知道如何使用angular.element ，没有例子。

更新：我设法在屏幕上有滑块，但它不起作用，我不能改变值或做一些事情。

Answer 1

理想情况下，你会把它放在一个指令中，但是你也可以把它放在控制器中。 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(); }); 

指令方法：

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); }); } } }); 

我也build议检查Angular Bootstrap的源代码： https ： //github.com/angular-ui/bootstrap/blob/master/src/tooltip/tooltip.js

您也可以使用工厂来创build指令。 这为您提供了最大的灵活性，可以围绕它来整合服

Answer 2

这应该是工作。 请看这个小提琴 。

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

确保按照以下顺序加载库：jQuery，jQuery UI CSS，jQuery UI，AngularJS。

Answer 3

您必须在指令中进行绑定。 看这个：

 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]); }; } }; }); 

这显示了一个滑块范围的例子，用jQuery UI完成。 用法示例：

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

Answer 4

最好的select是创build一个指令，并在那里包装滑块function。 秘密是使用$超时，只有当DOM准备好时才会调用jquery代码。

 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(); }); } }; }] );