DOM Abfrage in Angular JS; $ (". myclass"). jede() Alternative

Question

Ich bin relativ neu in Angular JS und ich habe jQuery für eine lange Zeit verwendet. Das ist der Grund, warum es mir schwer gefallen ist, die jQuery in mich zu kanalisieren. : D

Ich möchte wissen, wie wir eine DOM-Abfrage in eckigen durchführen können. Grundsätzlich ist mir eine Situation, wo ich so etwas wie diese

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

tun Kann mich jemand vorschlagen, wie ein Winkel Programmierer so etwas tun würde.

Dank

Answer 1

DOM-Manipulationen in AngularJS sollten nicht in der Steuerung, Dienstleistungen etc ... Aber es sollte Richtlinien ...

wenn Sie in dem nur an einem Ort sein wollen eine manipulieren DOM sollten Sie Direktive verwenden und Ihre Manipulation machen es in ...

hier einige gute Artikel über DOM-Manipulationen in AngularJS ist ...

Best Practice - Dom Manipulations

DOM Manipulation in AngularJS — Without jQuery

nun wollen wir versuchen, eine Richtlinie erstellen, wie Sie wollen. Es sieht so aus, als ob Sie Elemente manipulieren möchten, indem Sie sie über ihre Klasse auswählen. Ok kein Problem, so brauchen wir eine Richtlinie zu schaffen, die restrict:'C'Klasse bedeutet ...

hier ist unsere Richtlinie Erklärung ... (ausführliche Version alles zeigen)

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 
     } 
    }; 
}); 

hier PLUNKER ist. ..

Answer 2

Alternative für $('selector') ist angular.element('selector') und Alternative für $.each ist angular.forEach. So würde der Code wie folgt aussehen:

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