如何在AngularJS中使用jQuery
如何在AngularJS中使用jQuery
提问于 2014-03-26 23:47:44
我正在尝试使用简单的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，而且没有示例。
我设法把滑块放在屏幕上，但是它不工作，我不能改变它的值，也不能用它做什么。
回答 4
Stack Overflow用户
回答已采纳
发布于 2014-09-09 01:21:46
理想情况下，您可以将其放入指令中，但也可以直接将其放入控制器中。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
您也可以使用工厂来创建指令。这为您提供了最终的灵活性，以集成围绕它的服务以及所需的任何依赖项。
Stack Overflow用户
发布于 2014-03-26 23:54:32
这应该是可行的。请看一下this fiddle。
$(function() {
$( "#slider" ).slider();
});//Links to jsfiddle must be accompanied by code确保按以下顺序加载库: jQuery、jQuery UI CSS、jQuery UI、AngularJS。
Stack Overflow用户
发布于 2014-03-27 19:09:35
您必须在指令中进行绑定。看看这个：
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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22666289
复制相关文章
相似问题