jQuery e AngularJS: associa eventi a modifiche DOM

Question

Nel mio DOM in AngularJS, sto utilizzando un ng-include all'interno di una direttiva ng-repeat. Sta caricando l'HTML bene. Comunque, un problema che ho è che sto usando JQuery (ultima versione) per legare alcuni mouse e gli eventi del mouse sugli elementi nel DOM con la stessa classe di quelli aggiunti al DOM da ng-repeat e include. JQuery non sembra applicare i gestori di eventi alla nuova aggiunta DOM, però.

Nelle precedenti versioni .live() sembrava fare ciò che desideravo, ma è stato rimosso nell'ultima versione. Devo cancellare i binding sugli elementi e ricrearli ogni volta che il DOM aggiunge elementi aggiuntivi della classe?

Answer 1

risposta qui:

Questa è una domanda multiforme. Prima di tutto, tutti gli eventi di codice jQuery dovrebbero usare $ scope. $ Applicare per eseguire il codice angularjs come previsto. Esempio:

jQuery(selector).someEvent(function(){ 
    $scope.$apply(function(){ 
     // perform any model changes or method invocations here on angular app. 
    }); 
}); 

Nell'ultima versione di jQuery, in modo da avere gli eventi che si aggiornano in base a DOM cambia, si vuole 1. Ottenere un selettore per l'elemento di appartenenza più vicino (ex):

<div class="myDiv"> 
<div class="myDynamicDiv"> 
</div> 
<!-- Expect that more "myDynamicDiv" will be added here --> 
</div> 

In questo caso, il selettore principale sarà ".myDiv" e il selettore figlio sarà .myDynamicDiv.

Quindi, si vuole jQuery per avere gli eventi sul genitore dell'elemento quindi se gli elementi figlio cambiano, esso continuerà a funzionare:.

$('.myDiv').on("click", ".myDynamicDiv", function(e){ 
     $(this).slideToggle(500); 
     $scope.$apply(function(){ 
      $scope.myAngularVariable = !$scope.myAngularVariable; 
     }); 
}); 

Si noti che il $ ambito si applicano $() viene utilizzato per consentire a jQuery di accedere a quelle variabili angolari.

Spero che questo aiuti! Christian

Answer 2

disclaimer: sto imparando da solo angolare quindi queste sono solo supposizioni semi-istruite.

In primo luogo, considerare l'utilizzo di direttive angolari per il lavoro come dichiarato da Bertrand e Mark.

In secondo luogo, assicurarsi che jquery venga caricato prima dell'angolo, vedere here.

In terzo luogo, potrebbe trattarsi di un problema di binding (dinamico), vedere here.

Per favore, feedback.

Answer 3

Questa domanda è già stata ben fornita da Christian Stewart, ma volevo solo aggiungere qualcosa alla sua risposta.

Io uso il seguente codice e aggiungere il "cssClickableIcon" classe per i bottoni, in modo che quando l'utente fa clic su un pulsante (o un controllo div), si restringe leggermente verso l'interno.

E 'un piccolo trucco, ma ha davvero un bel effetto su una pagina web. Hai davvero la sensazione che la pagina web sia più interattiva, piuttosto che piatta, e che tu abbia cliccato sul controllo.

// Make the buttons "bounce" when they're clicked on 
$('body').on("mousedown", ".cssClickableIcon", function (e) { 
    $(this).css("transform", "scale(0.9)"); 
}); 
$('body').on("mouseup", ".cssClickableIcon", function (e) { 
    $(this).css("transform", ""); 
}); 

Poiché questa funzione utilizza jQuery on, questo fa lavoro con bottoni o altri elementi DOM creati da un ng-repeat comando AngularJS.

E, naturalmente, se si sta utilizzando proprie classi pulsante CSS di Bootstrap, è possibile aggiungere facilmente questo effetto in tutti del vostro Bootstrap/pulsanti angolari di utilizzare questo:

$('body').on("mousedown", ".btn", function (e) { 
    $(this).css("transform", "scale(0.9)"); 
}); 
$('body').on("mouseup", ".btn", function (e) { 
    $(this).css("transform", ""); 
}); 

amo questo effetto così tanto ed è una cosa così semplice da aggiungere!

Aggiornamento

Christian Stewart ha suggerito usando i CSS invece di jQuery, e lui è assolutamente giusto ...

Quindi, si può ottenere lo stesso effetto utilizzando solo questo semplice CSS:

.btn:active { 
    transform: scale(0.9); 
}