DOM manipulation in an AngularJS directive

I serve my AngularJS files from my NodeJS web server. So the external template in this directive is also served from there.

If we need to serve simple content from another web server and manipulate the DOM in a directive to render it appropriately, we can use a directive like this. I am able to manipulate the DOM and also change the innerText of td tags.


directive("testdirective", function(){
 return {
   restrict: "E",
   transclude: true,
   scope: {
     title: "@"
   },
   templateUrl: "/test.html",
   
   link: function(scope, element, attrs){
        
        console.log( document.querySelector('#documents_forms')) ;
        
        var table = angular.element( document.querySelector( '#documents_forms' ) );
        
        var tbodies = element.find('tbody');
        
        var columntext = [];
        
        for( var i = 0; i < tbodies.length; i ++ ){

          var tr = tbodies[i];

          var tds = $(tr).find('td');

          var text = [];

          var documentname;

          for( var y = 0; y &amp;amp;amp;lt; tds.length; y ++ ){

            tds[y].innerText = 'Test';

            documentname = tds[y].innerText;

            text.push( documentname );
          }
          columntext.push( text )
        }
        console.log( columntext );
   }
 };
})

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: