如何在 AngularJS 中使用 jQuery [英] How to use jQuery in AngularJS
问题描述
我正在尝试使用简单的 jQuery UI.我已经包含了所有内容,并且有这个简单的脚本:
和
<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
并且没有示例.
更新:我设法让滑块出现在屏幕上,但它不起作用,我无法更改值或使用它做任何事情.
理想情况下,您可以将其放在指令中,但也可以将其放在控制器中.http://jsfiddle.net/tnq86/15/
angular.module('App', []).controller('AppCtrl', function ($scope) {$scope.model = 0;$scope.initSlider = 函数 () {$(函数(){//等待加载事件触发,以便所有资源都可用$scope.$slider = $('#slider').slider({幻灯片:$scope.onSlide});});$scope.onSlide = 函数 (e, ui) {$scope.model = ui.value;$scope.$digest();};};$scope.initSlider();});
指令方法:
HTML
JS
angular.module('App', []).directive('slider', function (DataModel) {返回 {限制:'A',范围:真实,控制器:函数($scope,$element,$attrs){$scope.onSlide = 函数 (e, ui) {$scope.model = ui.value;//或者在模型上设置//DataModel.model = ui.value;//添加到角度摘要循环$scope.$digest();};},链接:功能(范围,EL,属性){变量选项 = {幻灯片:scope.onSlide};//在加载时设置滑块angular.element(document).ready(function () {scope.$slider = $(el).slider(options);});}}});
我还建议您查看 Angular Bootstrap 的源代码:https://github.com/angular-ui/bootstrap/blob/master/src/tooltip/tooltip.js
您也可以使用工厂来创建指令.这为您提供了极大的灵活性,可以围绕它集成服务以及您需要的任何依赖项.
I am trying to use simple jQuery UI. I've 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 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.
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.
这篇关于如何在 AngularJS 中使用 jQuery的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!