current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

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 ?

share|improve this question
    
May I ask why the downvote? – feniixx Sep 20 '15 at 20:58
up vote 2 down vote accepted

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

share|improve this answer
    
Oh, sorry for the func arg jaja, i'll test the code in the afternoon, or if you could make a jsfiddle to see if it works i'll accept it, but could you please answer the questions in order, thnks – feniixx Sep 20 '15 at 17:42
    
well if you want a demo then you need to set it up with plugin source. I am not planning on tracking that down and figuring out a plugin I've never seen before. Please keep in mind this isn't a code writing service. What questions do you have remaining? Version of jQuery is not ultra critical if you use a recent one – charlietfl Sep 20 '15 at 17:45
    
Don't get me wrong, i appreciate your answer, it's just that i can't test it right now, i'm on phone, i'll test it later, thanks. – feniixx Sep 20 '15 at 17:51

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.