如何在使用jQuery时使用Angular.js插件

Question

我一直在试图在使用jQuery时如何使用Angular.js插件，现在我使用的是角1.4，我有以下一些问题：

• 当我使用插件时，我可以使用jQuery版本吗？
• 我什么时候需要使用另一个版本的jQuery当使用角？
• 在使用不同版本的jQuery时有什么后果吗？
• 我怎么知道最新支持的jQuery版本是什么？
• 当引用我首先加载的html中的库时，是角还是jQuery？

到目前为止，我发现的是这些例子/教程：

• 一种使用角型jQuery插件的方法
• 角其他jQuery插件演示
• 将jQuery插件集成到AngularJS中的正确方法

但我不明白的是如何从角度分辨jquery属性，我的意思是：

假设我想使用漏电卷轴插件，当只使用jquery代码时如下所示：

标准JQuery方法

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代码转换为ng指令的角度是什么？

我知道我要做的是：

角方式

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>

但我不明白的是这是怎么回事：$( ".main" ).onepage_scroll？我理解它的角度是这样的：$( element ).onepage_scroll，但是这段代码表示显式元素，我如何告诉类main？

Answer 1

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

此外，链接函数的element参数将已经是一个jQuery对象，因此不需要再次将其包装在$()中。

当元素对象可用时，不需要指定元素类。

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版本而言，angular不包括jQuery，因此在 angular.js脚本标记之前包含的任何版本都会被使用。请参阅angular.element文档