Come ottenere l'elemento DOM che ha attivato ng-change?

Sto usando angularJS. Ho un paio di <select> elementi sulla mia pagina, ognuna con il proprio ng-change, ad esempio:Come ottenere l'elemento DOM che ha attivato ng-change?

<select id="hairColorComponent" ng-model="hairColor" 
     ng-options="option.name for option in hairColorData" 
     ng-change="updateUserData()">

voglio essere in grado di determinare quale elemento DOM ma ho aggiornato all'interno della funzione updateUserData, senza dover specificare manualmente come parametro per ciascun attributo ng-change.

C'è un event o caller o qualcosa di simile che posso utilizzare nel contesto di updateUserData?

Speriamo che qualcosa di simile ng-change="updateUserData(caller)"

fonte

2013-06-09 OpherV

http://stackoverflow.com/questions/ 48239/get-the-id-of-the-element-that-fired-an-event-using-jquery – Arunu

@Arunu Sto usando AngularJS, non jQuery. Ho appena modificato la domanda per renderla più chiara. – OpherV

Non c'è modo (facile) per fare questo in base alla progettazione. I controller angolari dovrebbero essere completamente separati dal DOM, quindi se vi trovate a dover fare riferimento al DOM in essi probabilmente state avvicinando le cose nel modo sbagliato.

Se il vostro HTML è

<select id="hairColorComponent" ng-model="hairColor" 
     ng-options="option.name for option in hairColorData" 
     ng-change="updateUserData()">

quindi modificando il prescelto cambierà il valore della $scope.hairColor nel controller. In updateUserData() basta leggere il suo valore e agire di conseguenza.

Se nella tua situazione non c'è davvero modo di farlo se non facendo riferimento al DOM, puoi farlo scrivendo una direttiva personalizzata. In generale, la manipolazione DOM diretta in Angular dovrebbe essere un tipo di misura di ultima istanza.

fonte

2013-06-09 09:08:25 mikel

Questo era ciò di cui avevo paura. Sto cercando di ottenere l'ID dell'elemento DOM per registrare quali dati sono stati modificati. Come faresti a farlo in modo diverso allora? '$ guarda' ogni voce di dati separatamente? – OpherV

Non sono sicuro della tua situazione esatta, ma ho scoperto che non è nemmeno necessario avere un id sull'elemento se hai un modello ng, dato che puoi fare tutto con quello. Puoi $ guardare, o avere un metodo di cambio ng separato per ogni selezione. Né lo so SECCO, ma tenere separati DOM e controller rende la vita molto più semplice per la manutenzione/test a lungo termine. – mikel

Trovato su google, alla fine ho risolto il mio problema, ecco la mia soluzione.

Se hai solo bisogno dell'ID, puoi sempre passarlo come parametro.

<select id="hairColorComponent" ng-model="hairColor" 
     ng-options="option.name for option in hairColorData" 
     ng-change="updateUserData('hairColorComponent')">

Ancora non super pulito, ma ha risolto il mio problema. Dal momento che avevo effettivamente bisogno dell'elemento dom, ho quindi usato jQuery per ottenere l'elemento.

$scope.updateUserData = function (id) { 
    var element = jQuery('#'+id); 
};

(Per coloro che chiedono, sto facendo del mio meglio con la conversione di codice legacy che "magicamente" salva le impostazioni utente sulle pagine di tutto il sito.)

fonte

2016-02-11 18:15:35 Loren

Non il modo "angolare". stai modificando l'interfaccia utente da un controller, ecco a cosa servono le direttive. – Dementic

Come ottenere l'elemento DOM che ha attivato ng-change?

risposta

Problemi correlati