我正在尝试使用简单的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>
但是,当我打开页面时,没有滑块。根据角度文件:
如果有jQuery,则angular.element是jQuery函数的别名。如果jQuery不可用,则angular.element委托给Angular的内置jQuery子集。
但是,我不太了解如何使用angular.element,也没有示例。
angular.element
更新: 我设法在屏幕上显示了滑块,但是它不起作用,我无法更改值或对其进行任何处理。
理想情况下,您可以将其放入指令中,但也可以将其放入控制器中。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); }); } } });
我还建议您查看Angular Bootstrap的源代码:https : //github.com/angular- ui/bootstrap/blob/master/src/tooltip/tooltip.js
您也可以使用工厂创建指令。这为您提供了最大的灵活性,可以围绕它以及所需的任何依赖项集成服务。