Angularjs - dynamically add and update DOM

Question

I am trying add HTML elements through javascript that has a directive:

document.getElementsByClassName("day-grid")[0].innerHTML = "<div ng-uc-day-event></div>";
or
var ele = document.createElement("div");
ele.setAttribute("ng-uc-day-event","");
document.getElementsByClassName("day-grid")[0].appendChild(ele);

Both results in adding the div to .day-grid. I am using a directive to load template from an external file into ng-uc-day-event. It works as expected when it is run from the HTML file, but it doesn't work when I run the above code from the developer console.

How do I make angularjs to call the directive or evaluate the element when I am adding the element to DOM, so that the template is loaded into div when it is inserted into .day-grid?

Below is the directive I am using:

ulcal.directive("ngUcDayEvent", function ($timeout) {
  return {
    restrict: 'A',
    templateUrl: 'views/dayevent.html',
    link: function (s, e, a) {
      $timeout(function () {
        s.$emit("ucDayEventLoaded");
      })
    }
  }
});

@MichailMichailidis That question is for adding the element from the controller. I know how to do that. What I want to know is how to add an element completely from outside, eg: through jquery, dev console etc. Any way that link too helped me. Thank you — Gopikrishna S
– Gopikrishna S, Commented Mar 21, 2015 at 0:52

user2943490 · Accepted Answer · 2014-10-27 03:48:49Z

2

You need to tell Angular to $compile the template and associate it with a scope. Angular will not recognise bits of HTML being inserted into the DOM at arbitrary times.

Inject the $compile service to wherever you are doing your DOM manipulation.

var container = angular.element(document.getElementsByClassName('day-grid')[0]);
var myDirective = angular.element('<div ng-uc-day-event></div>');

container.append(myDirective);

$compile(container)(scope);

answered Oct 27, 2014 at 3:48

user2943490

6,9402 gold badges24 silver badges39 bronze badges

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

1 Comment

Gopikrishna S Over a year ago

This is similar to adding the element from the controller: stackoverflow.com/questions/26447885/…. I know how to do that. What I want to know is how to add an element completely from outside, eg: through jquery, dev console etc. Any way your answer also helped me. Thank you

Gopikrishna S · Accepted Answer · 2015-02-16 23:40:13Z

1

This solved my problem:

inj = angular.injector(['ng', ApplicationName]);
inj.invoke(function ($rootScope, $compile) {
   ele = $compile("<div ng-uc-day-event></div>")($rootScope)[0];
   $(".day-grid").append(ele);
});

answered Feb 16, 2015 at 23:40

Gopikrishna S

2,4594 gold badges29 silver badges40 bronze badges

Collectives™ on Stack Overflow

Angularjs - dynamically add and update DOM

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related