Massing the DOM with AngularJS

Question

I know that manipulating the DOM goes against the rules of Angular, but in this case I am doing a transverse DOM to change the affinity of the node.

In jQuery you can do something like this:

$ (this) .parent () addClass ('load'.).

In Angular, you would do something like this:

angular.element (this) .parent () addClass ('load.') ;.

Of course, this does not work, because the API does not have a parent () method or support for the addClass () method.

What brings me to the question, how else can I do this?

Thanks!

Answer 1

Angular elements are wrapped by jqLite by default (Angular's own jQuery implementation). If you added jQuery to your project, then the elements are wrapped in full jQuery.

Here is a list of methods available with jQuery lite http://docs.angularjs.org/api/angular.element

As you can see, you have access to parent() and addClass() . This way you get many DOM manipulation capabilities without adding jQuery as a dependency.

- * -

It is perfectly normal to manipulate the DOM with angular, it is best to do this from directives, here is a small example of an element that has access to the parent

HTML

 <div ng-app='app'> <div id="someparent"> <div my-directive> </div> </div> </div> 

In your js

 var app = angular.module('app', []); app.directive('myDirective', function(){ return{ restrict: 'A', link: function(scope, element, attributes){ console.log(element.parent().attr('id')); // "someparent" element.parent().addClass('loading'); // adding loading class to parent } }; });​​​​​​​​​​​​​ 

jsfiddle: http://jsfiddle.net/jaimem/Efyv4/1/

Of course, when creating your application, you can have directives that control only elements within you.

- * -

In addition, as Mark points out, you can use angular existing directives such as ngClass instead of creating your own. It is not clear what you want to achieve, but I recommend watching ngCloak .

Answer 2

In jQuery, we often have an event trigger, then from the element that raised the event, we traverse the DOM to find another element, which is then processed. For example, your example:

 // some event causes this code to execute: $(this).parent().addClass('.loading'); 

In AngularJS, we declare where the manipulation points are at the beginning of the HTML (for example, ng-class, as @blesh suggests), then the events change the $ scope properties, and Angular automatically performs the DOM manipulation for us. For instance:.

 <div ng-controller="MyCtrl" ng-class="loadingClass">parent <a ng-click="loadingClass='loading'">child</a> </div> 

Controller:

 function MyCtrl($scope) { // if you want some other class initially, uncomment next line: // $scope.loadingClass = 'notLoading'; }​ 

Above, by clicking on the "child" link, the value of $ scope.loadingClass is changed. Angular will notice the change and apply the new class to the parent div.

For more complex manipulations, a special directive like @ jm-shows is required.

jQuery: events result in DOM traversal and DOM manipulation code (required).
Angular: events change $ scope and magic happens (in our declarative HTML).