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: Logo

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

Facebook photo

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

Connecting to %s

%d bloggers like this: