AngularJs + Jquery

xander
Javascript

Amis du soir bonsoir,
je me retourne vers vous car j'ai un petit soucis que j'arrive pas a régler, j'ai créer un menu accordéon avec du html css jquery,
or angularjs ne prend pas en compte ma fonction jquery, j'ai donc créer une directive, qui me permet de l'utiliser or sa ne fonctionne toujours pas et j'ai toujours le même message d'erreur qui me dis TypeError: Object [object Object] has no method 'accordion'.
(j'ai suivis le tuto sur la création de directive)
voici mes codes :
mon code jquery pour mon menu:

$(document).ready(function(){
    $(".accordeon > li > .nav-title").click(function(){

        if(false == $(this).next().is(':visible')) {
            $('.accordeon ul').slideUp(300);
        }
        $(this).next().slideToggle(300);
    });

    $('.accordeon ul:eq(0)').show();
});

ma directive : 

// Création de ma directive pour mon menu
    app.directive('accordion', function(){
        return {
            restrict: 'C',
            link: function(scope, element, attrs){
                $(element).accordion();
            }
        }
    })

mon menu: 

<ul class="accordeon accordion">
    <li><div>Sports</div>
        <ul>
            <li><a href="#">Taekwondo</a></li>
            <li><a href="#">Boxe</a></li>
            <li><a href="#">Football</a></li>
        </ul>
    </li>
    <li><div>Technology</div>
        <ul>
            <li><a href="#">iPhone</a></li>
            <li><a href="#">Facebook</a></li>
            <li><a href="#">Twitter</a></li>
        </ul>
    </li>
    <li><div>Latest</div>
        <ul>
            <li><a href="#">prout</a></li>
            <li><a href="#">toto</a></li>
            <li><a href="#">tralalala</a></li>
        </ul>
    </li>
</ul>

merci d'avance

7 réponses

Maenhyr
Réponse acceptée

Pourquoi ne pas gérer totalement ton code dans ta directive ? ta fonction jQuery peut être mise dans ta directive.

xander
Auteur
Réponse acceptée

Résolue

// Création de ma directive pour mon menu
    app.directive('accordion', function(){
        return {
            restrict: 'A',
            link: function(scope, element, attrs){
                $(".accordeon > li > .nav-title").click(function(){

                    if(false == $(this).next().is(':visible')) {
                        $('.accordeon ul').slideUp(300);
                    }
                    $(this).next().slideToggle(300);
                });
                $('.accordeon ul:eq(0)').show();
            }
        }
    })

c'étais bête comme bonjour thx de m'avoir mis sur la vois prbaron

xander
Auteur

Re alors j'y suis presque sauf que sa déconne un peut, ici j'utilise la function .click pour qu'il me lance ma function jquery au click, sauf que sa me fait des effets bisard d'accordéon connaîtriez vous une autre function qui pourrais réglé mon problème et faire functionné mon Jquery correctement via angular.

voici mes code a jour :
ma function jquery:

$(document).ready(function(){
  accordion($(".accordeon"));
 });
function accordion(){
$(".accordeon > li > .nav-title").click(function(){

    if(false == $(this).next().is(':visible')) {
        $('.accordeon ul').slideUp(300);
    }
    $(this).next().slideToggle(300);
});

$('.accordeon ul:eq(0)').show();
}

ma directive, j'ai opté pour un restrict A: 

// Création de ma directive pour mon menu
    app.directive('accordion', function(){
        return {
            restrict: 'A',
            link: function(scope, element, attrs){
                $(element).click(accordion);
            }
        }
    })

mon menu: 

<ul class="accordeon" accordion>
    <li><div>Sports</div>
        <ul>
            <li><a href="#">Taekwondo</a></li>
            <li><a href="#">Boxe</a></li>
            <li><a href="#">Football</a></li>
        </ul>
    </li>
    <li><div>Technology</div>
        <ul>
            <li><a href="#">iPhone</a></li>
            <li><a href="#">Facebook</a></li>
            <li><a href="#">Twitter</a></li>
        </ul>
    </li>
    <li><div>Latest</div>
        <ul>
            <li><a href="#">prout</a></li>
            <li><a href="#">toto</a></li>
            <li><a href="#">tralalala</a></li>
        </ul>
    </li>
</ul>

merci

xander
Auteur

tout simplement parce-que j'ai pas trouver comment faire ^^ je débute, ta lumière serais d'une grande aide

Maenhyr

On ne retrouve pas ça dans ton code HTML, ($(".accordeon > li > .nav-title").click(function(){ ), on ne voit pas où est la classe .nav-title. Peux tu décrire un peu plus ton code, ton besoin, stp ?

xander
Auteur

Effectivement le code étant un peu long j'avais mis une structure basique XD mon besoin est que ma function jQuery fonctionne avec Angular via la directive voici le code clairement

<div class="menu">
          <ul class="accordeon">
              <li accordion><div class="nav-title">Sports</div>
                  <ul>
                            <li><a href="#">Taekwondo</a></li>
                            <li><a href="#">Boxe</a></li>
                            <li><a href="#">Football</a></li>
                  </ul>
              </li>
              <li><div class="nav-title">Media</div>
                  <ul>
                    <li><a href="#/articles/9">Médias</a></li>
                  </ul>
              </li>
              <li><div class="nav-title">Presse</div>
                  <ul>
                    <li><a href="#/articles/24">Presse</a></li>
                  </ul>
              </li>
          </ul>
        </div>

Ma directive et ma function ne change pas le souci ici c'est que comme sa sa fonctionne que partiellement après 3 déroulements du menu sa pète un câble sa se déroule dans tout les sens

Maenhyr

Petite amélioration possible, regarde du côté de l'objet "element" que tu passes en paramètre de ton link, tu verras qu'il contient l'objet jQuery de ta directive, ça te permettra d'être plus modulable.