AngularJs + Jquery

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

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

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

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 ?

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

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

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.