使用 Angular.js 时如何使用 jQuery 插件 [英] How to use jQuery Plugins when using Angular.js

问题描述

我一直试图弄清楚在使用 Angular.js 时如何使用 jQuery 插件，现在我使用的是 Angular 1.4，我有一些问题:

• 我可以在使用插件时使用 Angular 自带的 jQuery 版本吗?
• 在使用 Angular 时，我什么时候需要使用其他版本的 jQuery?
• 使用不同版本的 jQuery 会有什么后果吗?
• 我如何知道 Angular 支持的最新 jQuery 版本是什么?
• 在引用我首先加载的 html 中的库时，是 Angular 还是 jQuery?

到目前为止我发现的是这些示例/教程:

• 一种方法在 Angular 中使用 jQuery 插件
• Angular 其他 jQuery 插件演示
• 在 AngularJS 中集成 jQuery 插件的正确方法

但我不明白的是如何从角度判断 jquery 属性，这就是我的意思:

假设我想使用 onepage-scroll 插件，当只使用 jquery 代码时像这样:

标准JQuery方式

HTML:

<div class="page_container"><h1>一页滚动</h1><h2>使用 One Page Scroll 插件创建类似 Apple 的一页滚动网站(iPhone 5S 网站)</h2><div class="btns"><a class="reload btn" href="https://github.com/peachananr/onepage-scroll">下载Github

<img src="phones.png" alt="phones"></节>

<div class="page_container"><h1>即用型插件</h1><h2>您只需要一个 HTML 标记，调用脚本和 BAM！</h2><div class="btns"><a class="reload btn" href="https://github.com/peachananr/onepage-scroll">下载Github

</节>

JS:

$(document).ready(function() {$( ".main" ).onepage_scroll( {//这些是我说的属性sectionContainer: "节",响应回退:600，循环:真})});

将 jquery 代码转换为 ng 指令的角度方法是什么?

这是我理解我必须做的:

角度方式

JS:

(函数(){'使用严格';有角的.module('app.layout').directive('jqOnepageScroll', jqOnepageScroll);函数 jqOnepageScroll() {返回 {限制:'A'，链接:函数(范围、元素、属性){$( element ).onepage_scroll( scope.$eval( attrs.jqOnepageScroll ) );}};}})();

HTML:

...</节>
...</节>

但我不明白发生了什么: $( ".main" ).onepage_scroll ?我知道在 angular 中它是这样的:$( element ).onepage_scroll 但是那段代码说显式 element，我如何告诉 main ?

解决方案

您的指令方法接近目标，但缺少函数参数.

同样，link 函数的 element 参数已经是一个 jQuery 对象，所以不需要再次将它包裹在 $() 中.

当你已经有可用的元素对象时，不需要指定元素类

角度.module('app.layout').directive( 'jqOnepageScroll', jqOnepageScroll );//忘记函数arg函数 jqOnepageScroll() {返回 {限制:'A'，链接:函数(范围、元素、属性){//展开 $(element)element.onepage_scroll( scope.$eval( attrs.jqOnepageScroll ) );}};}

就 jQuery 版本而言，angular 不包含 jQuery，因此它是您使用 before angular.js 脚本标记的任何版本.请参阅angular.element 文档

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:

• Can i use the jQuery version that comes with Angular when using plugins?
• When do i need to use another version of jQuery when using Angular?
• Are there any consequences when using a different version of jQuery?
• How do i know what's the latest supported jQuery version Angular supports?
• When referencing the libraries in the html which i load first, Angular or jQuery?

What i have found so far are these examples/tutorials:

• An approach to use jQuery plugins with Angular
• Angular Other jQuery Plugin Demo
• Correct way to integrate jQuery plugins in AngularJS

But what i don't get is how to tell from angular the jquery properties, here's what i mean:

Let's say i want to use onepage-scroll plugin, when using just jquery code is like this:

Standard JQuery Way

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

What would be the angular way to transform that jquery code into a ng-directive?

Here's what i understand i have to do:

Angular Way

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>

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.

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

        }
    };
}

As far as the jQuery version, angular doesn't include jQuery so it is whatever version you include before angular.js script tag that gets used. See angular.element docs

这篇关于使用 Angular.js 时如何使用 jQuery 插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！