使用 Angular.js 时如何使用 jQuery 插件答案

【问题标题】：How to use jQuery Plugins when using Angular.js使用 Angular.js 时如何使用 jQuery 插件
【发布时间】：2015-09-20 17:18:22
【问题描述】：

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

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

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

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

假设我想使用onepage-scroll插件，当只使用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？

【问题讨论】：

请问为什么投反对票？

标签： jquery angularjs jquery-plugins angularjs-directive

【解决方案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 docs

【讨论】：