Angulaire - JQuery à l'intérieur ng-view ne fonctionne pas

Question

je suis nouveau sur Angular, aidez-moi s'il vous plaît!

J'ai une page et à l'intérieur i inclus une vue:

<div class="row"> 
    <div class="col-md-12"> 
     <ui-view></ui-view> 
    </div> 
</div>` 

Dans la partie inclus il y a quelques plugins jquery, comme Revolution curseur et d'autres animaux. Le problème est que tous les plugins jquery à l'intérieur de ui-view ne fonctionnent pas.

J'ai cherché la raison et je sais que la bibliothèque de jquery doit être incluse avant celle d'Angular, et je l'ai fait, mais rien n'a changé.

Que puis-je faire pour exécuter correctement tous les scripts jquery?

Answer 1

La raison en est que tous les plugins jQuery que vous utilisez essaient de se lancer dès le chargement de la page. Mais Angular peuple <ng-view/> quelque temps après cela. La solution consiste à lancer les plugins manuellement. Le moyen angulaire pour cela est de créer votre propre directive pour chaque élément 'spécial' et d'appliquer la fonction jQuery correspondante dans sa fonction link. Permet d'utiliser un calendrier par exemple:

app.directive('calendar', function(){ 

    return { 
     template: '<div class="calendar"></div>', 
     link: function(scope, el, attrs, ctrl){ 

      $(el).makeCalendar(); 
     } 
    } 
}) 

De cette façon, vous pouvez utiliser <calendar></calendar> en vous HTML pour créer des calendriers.

EDIT

Merci pour votre réponse, mais peut-être que je ne comprends pas ...

Par exemple, sur document.ready-je faire ceci:

$doc.ready(function() { 
    var $sliderRange = $('#slider-range'); 
    var $amount = $('#amount'); 
    if ($sliderRange.length) { 
    // apply range slider 
    $sliderRange.slider({ 
     range: true, 
     min: 0, 
     max: 3000, 
     values: [0, 2600], 
     slide: function(event, ui) { 
     $amount.val('€' + ui.values[0] + ' - €' + ui.values[1]); 
    } 
    }); 
    $amount.val('€' + $sliderRange.slider('values', 0) + ' - €' + 
    $sliderRange.slider('values', 1)); 
    } 
}); 

Comment puis-je fais ceci avec la directive?

Exemple:

app.directive('slider', function(){ 

    var defaults = { 
     range: true, 
     min: 0, 
     max: 3000, 
     values: [0, 2600], 
    }; 

    return { 
     template: '<div></div>', 
     replace: true, 
     scope: { 
      options: '=', 
      value: '=' 
     }, 
     link: function(scope, el, attrs, ctrl){ 

      // merge options with defaults 
      var opts = ng.extend({}, defaults, scope.options); 

      // set initial value 
      opts.values = scope.value = scope.value || [0, 0]; 

      // watch for changes and update the scope's value 
      opts.slide = function(event, ui){ 
       scope.value = ui.values; 
       scope.$apply(); 
      }; 

      // apply the jquery plugin with the options 
      $(el).slider(opts); 
     } 
    } 
}) 

Maintenant, vous l'utiliser comme ça:

<slider value="sliderValue"></slider> 
<p>Result: €{{sliderValue[0]}} - € {{sliderValue[1]}}</p> 

et vous pouvez modifier les options comme ça:

<slider value="sliderValue" options="{max: 100}"></slider>