如何使用Angular.js时候使用jQuery插件 [英] How to use jQuery Plugins when using Angular.js
问题描述
我一直在试图找出使用Angular.js时，我怎么能使用一个jQuery插件，现在我使用的角1.4 后，一些问题我已经是：
I've been trying to figure out how could i use a jQuery plugin when using Angular.js, right now i'm using Angular 1.4, some questions i have are:
- 我可以使用使用插件时，随着角度来jQuery的版本？
- 当我需要使用jQuery的另一个版本采用了棱角分明？ 在当前
- 使用不同版本的jQuery的时候有没有什么后果？
- 我怎么知道什么是支持的最新版本的jQuery角支撑？
- 当引用在HTML库，我首先加载，角或jQuery的？
是我迄今发现的这些例子/教程：
What i have found so far are these examples/tutorials:
- 使用jQuery插件与角的一种方法
- 角其他jQuery插件演示
- Correct方法来集成在AngularJS jQuery插件
- An approach to use jQuery plugins with Angular
- Angular Other jQuery Plugin Demo
- Correct way to integrate jQuery plugins in AngularJS
但我不明白的是如何从角度告诉jQuery的特性，这就是我的意思是：
But what i don't get is how to tell from angular the jquery properties, here's what i mean:
比方说，我想用 onepage滚动的插件，使用时只需jQuery的code是这样的：
Let's say i want to use onepage-scroll plugin, when using just jquery code is like this:
HTML：
<div class="main">
<section class="page1">
<div class="page_container">
<h1>One Page Scroll</h1>
<h2>Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin</h2>
<div class="btns"><a class="reload btn" href="https://github.com/peachananr/onepage-scroll">Download on
Github</a>
</div>
</div>
<img src="phones.png" alt="phones">
</section>
<section class="page2">
<div class="page_container">
<h1>Ready-to-use plugin</h1>
<h2>All you need is an HTML markup, call the script and BAM!</h2>
<div class="btns"><a class="reload btn" href="https://github.com/peachananr/onepage-scroll">Download on
Github</a>
</div>
</div>
</section>
</div>
JS：
$(document).ready(function() {
$( ".main" ).onepage_scroll( {//These are the properties i talk about
sectionContainer: "section",
responsiveFallback: 600,
loop: true
} )
});
什么是变换了jQuery的code到NG-指令角的方式？
What would be the angular way to transform that jquery code into a ng-directive?
这就是我知道我必须做的：
Here's what i understand i have to do:
JS：
(function () {
'use strict';
angular
.module( 'app.layout' )
.directive( 'jqOnepageScroll', jqOnepageScroll );
function jqOnepageScroll() {
return {
restrict: 'A',
link: function ( scope, element, attrs ) {
$( element ).onepage_scroll( scope.$eval( attrs.jqOnepageScroll ) );
}
};
}
})();
HTML：
<div class="main"
jq-onepage-scroll="{
sectionContainer: 'section',
responsiveFallback: 600,
loop: true
}">
<section class="page1">
...
</section>
<section class="page2">
...
</section>
</div>
但我不明白的是与此发生了什么： $（。主要）.onepage_scroll ？据我所知，在角是这样的： $（元素）.onepage_scroll ，但是那件code的说明确的元素的，我怎么告诉类主？
But what i don't understand is what happened with this: $( ".main" ).onepage_scroll ? I understand that in angular it is this: $( element ).onepage_scroll but that piece of code says explicit element, how do i tell the class main ?
推荐答案
您指令的做法是接近目标但是它缺少函数参数。
Your directive approach is close on target however it is missing function argument.
另外，元素链接函数的参数将已经是一个jQuery对象，所以没必要把它包在 $（）
Also the element argument of link function will already be a jQuery object so no need to wrap it in $() again.
有没有必要指定元素类，当你已经拥有的元素对象
There is no need to specify the element class when you already have the element object available
angular
.module( 'app.layout' )
.directive( 'jqOnepageScroll', jqOnepageScroll );//forgot function arg
function jqOnepageScroll() {
return {
restrict: 'A',
link: function ( scope, element, attrs ) {
// unwrap $(element)
element.onepage_scroll( scope.$eval( attrs.jqOnepageScroll ) );
}
};
}
至于jQuery的版本，角不包括jQuery的，因此无论是你的版本包括的前的 angular.js是被使用的脚本。请参见 angular.element文档
这篇关于如何使用Angular.js时候使用jQuery插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
