7

I am relatively new to Angular JS and I have been using jQuery for a long time. That is why I have been having a hard time shifting the jQuery inside me into angular. :D

I want to know how we can perform a DOM Query in angular. Basically, I am facing a situation where I have to do something like this 

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

Can anyone suggest me how an angular programmer would do something like this.

Thanks

aayush shrestha
  • 1,858
  • 2
  • 17
  • 33
  • 1
    You should go through [__How do I “think in AngularJS” if I have a jQuery background?__](http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background) first. – Satpal Jun 11 '14 at 05:45

2 Answers2

4

DOM manipulations in angularjs should not be in controller, services etc... But it it should be in the only one place directives...

if you want to manipulate a DOM you should use directive and make your manipulation in there...

here is some good articles about DOM manipulations in angularjs...

Best Practice - Dom Manipulations

DOM Manipulation in AngularJS — Without jQuery

now let's try create a directive like you want. It looks like you want to manipulate element by selecting them via their class. Ok no problem so we need to create a directive which has restrict:'C' means CLASS...

here is our directive declaration... (verbose version to show everything)

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

here is PLUNKER...

Poyraz Yilmaz
  • 5,847
  • 1
  • 26
  • 28
2

Alternative for $('selector') is angular.element('selector') and alternative for $.each is angular.forEach. Thus your code would look like:

var els = angular.element('.myClass');
angular.forEach(els, function( el ){
   angular.element(el).doSomething();
})
Kamran Ahmed
  • 11,809
  • 23
  • 69
  • 101