DOM Query in Angular JS; $ (". myclass"). each() Alternativa

Question

Sono relativamente nuovo ad Angular JS e uso jQuery da molto tempo. Ecco perché ho avuto difficoltà a spostare il jQuery dentro di me in modo angolare. : D

Voglio sapere come possiamo eseguire una query DOM in angolare. Fondamentalmente, io sto affrontando una situazione in cui devo fare qualcosa di simile

$(".myClass").each(function(){ 
    $(this).doSomething(); 
}) 

Qualcuno mi può suggerire come un programmatore angolare avrebbe fatto qualcosa di simile.

Grazie

Answer 1

manipolazioni DOM in angularjs non dovrebbe essere in controllo, servizi, ecc ... Ma dovrebbe essere in un solo posto direttive ...

se si vuole manipolare un DOM è necessario utilizzare direttiva e rendere la vostra manipolazione in là ...

ecco alcuni buoni articoli su manipolazioni DOM in angularjs ...

Best Practice - Dom Manipulations

DOM Manipulation in AngularJS — Without jQuery

ora proviamo a creare una direttiva come si desidera. Sembra che tu voglia manipolare l'elemento selezionandoli tramite la loro classe. Ok non è un problema così abbiamo bisogno di creare una direttiva che ha restrict:'C' significa CLASSE ...

qui è la nostra dichiarazione di direttiva ... (versione dettagliata per mostrare tutto)

app.directive('myClass',function(){ 
    // Runs during compile 
    return { 
     // name: '', 
     // priority: 1, 
     // terminal: true, 
     // scope: {}, // {} = isolate, true = child, false/undefined = no change 
     // controller: function($scope, $element, $attrs, $transclude) {}, 
     // require: 'ngModel', // Array = multiple requires, ? = optional,^= check parent elements 
     restrict: 'C', // E = Element, A = Attribute, C = Class, M = Comment 
     // template: '', 
     // templateUrl: '', 
     // replace: true, 
     // transclude: true, 
     // compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})), 
     link: function($scope, iElm, iAttrs, controller) { 
      console.log('Here is your element', iElm); 
        // DO SOMETHING 
     } 
    }; 
}); 

qui è PLUNKER. ..

Answer 2

L'alternativa per $('selector') è angular.element('selector') e l'alternativa per $.each è angular.forEach. Così il codice sarà simile:

var els = angular.element('.myClass'); 
angular.forEach(els, function(el){ 
    angular.element(el).doSomething(); 
})