DOM Query w Angular JS; $ (".myclass"). each() Alternative

Question

Jestem stosunkowo nowy w Angular JS i używam jQuery przez długi czas. Właśnie dlatego ciężko mi było przesuwać jQuery we mnie w kanciastą. : D

Chcę wiedzieć, w jaki sposób możemy wykonać zapytanie DOM w kanciastym. Zasadniczo mam do czynienia z sytuacją, w której muszę zrobić coś takiego

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

Czy ktoś może zaproponować mi jak kanciasty programista zrobi coś takiego.

Dzięki

Answer 1

DOM manipulacje w angularjs nie powinny znajdować się w kontrolerze, usług itp ... ale to powinno być w tylko jedno miejsce dyrektyw ...

jeśli chcesz manipulować DOM należy użyć dyrektywy i dokonać manipulacji tam ...

tutaj jest kilka dobrych artykułów na temat DOM manipulacji w angularjs ...

Best Practice - Dom Manipulations

DOM Manipulation in AngularJS — Without jQuery

teraz spróbujmy stworzyć dyrektywę jak chcesz. Wygląda na to, że chcesz manipulować elementem, wybierając go za pomocą swojej klasy. Ok nie ma problemu więc musimy stworzyć dyrektywę, która ma restrict:'C' oznacza CLASS ...

tutaj jest nasza deklaracja dyrektywy ... (wersja opisowy, aby pokazać wszystko)

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

tutaj jest PLUNKER. ..

Answer 2

Alternatywa dla $('selector') to angular.element('selector'), a alternatywą dla $.each jest angular.forEach. W ten sposób Twój kod będzie wyglądać następująco:

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