css is not applied to the appended html elements by angular.js?

Question

I've appended the some html to a div by angular.js like this

  var myEl = angular.element( document.querySelector( '#form' ) );
  myEl.append(
    '<div layout="row" layout-wrap layout-padding >'+
      '<div flex = "50" flex-sm = "100" flex-md = "100" flex-lg = "50">'+
        '<div layout = "row" layout-align = "center center">'+
          '<img class="md-avatar">'+
        '</div>'+
        '<div layout = "row" layout-align = "center center">'+
          '<md-button class="md-raised" style="width: 200px;white-space: normal;line-height: 12px;">'+
            '<i class="fa fa-upload"></i>'+
            'Upload New Image'+
          '</md-button>'+
        '</div>'+
      '</div>'+
      '<div flex = "50" flex-sm = "100" flex-md = "100" flex-lg = "50">'+
        '<i class="fa fa-trash-o" style = "float:right;"></i>'+
        '<md-input-container flex>'+
          '<label>Name</label>'+
          '<input type="text" >'+
        '</md-input-container>'+

        '<md-input-container flex>'+
          '<label>Title</label>'+
          '<input type="text" >'+
        '</md-input-container>'+

        '<md-input-container flex>'+
          '<label>Email</label>'+
          '<input type="email" >'+
        '</md-input-container>'+

        '<md-input-container flex>'+
          '<label>Telephone</label>'+
          '<input type="text" >'+
        '</md-input-container>'+
      '</div>'+
    '</div>'
  );

But the recently added elements not taking the website's css i'm using Angular-material as css framework .

Please guide me into this and what should i fix.

angular won't compile directives when you append them to DOM without using $compile — charlietfl
– charlietfl, Commented Sep 5, 2015 at 12:11

Anik Islam Abhi · Accepted Answer · 2015-09-05 12:12:37Z

2

You forget to compile it

Try like this

$compile(myEl.contents())($scope);

answered Sep 5, 2015 at 12:12

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

css is not applied to the appended html elements by angular.js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related