How to use jQuery Plugins when using Angular.js

Question

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:

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 ?

charlietfl · Accepted Answer · 2015-09-20T17:39:23.003

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

How to use jQuery Plugins when using Angular.js

Standard JQuery Way

Angular Way

1 Answers1

Linked