The directive is not added to html by means of angular. Why?

Question

Angular

Hello.
Colleagues help.
There are two directive templates like this:

<div class="month-box">
  <div class="week-row clearfix">
    <div class="day-col"></div>
    <div class="day-col"></div>
    <div class="day-col"></div>
    <div class="day-col"></div>
    <div class="day-col"></div>
    <div class="day-col"></div>
    <div class="day-col"></div>
  </div>
  <div class="week-row clearfix">
          <div class="day-col"></div>
    <div class="day-col"></div>
    <div class="day-col"></div>
    <div class="day-col"></div>
    <div class="day-col"></div>
    <div class="day-col"></div>
    <div class="day-col"></div>
  </div>
  <div class="week-row clearfix">
    <div class="day-col"></div>
    <div class="day-col"></div>
    <div class="day-col"></div>
    <div class="day-col"></div>
    <div class="day-col"></div>
    <div class="day-col"></div>
    <div class="day-col"></div>
  </div>
  <div class="week-row clearfix">
     <div class="day-col"></div>
     <div class="day-col"></div>
    <div class="day-col"></div>
     <div class="day-col"></div>
    <div class="day-col"></div>
     <div class="day-col"></div>
    <div class="day-col"></div>
  </div>
  <div class="week-row clearfix">
    <div class="day-col"></div>
     <div class="day-col"></div>
    <div class="day-col"></div>
     <div class="day-col"></div>
    <div class="day-col"></div>
     <div class="day-col"></div>
    <div class="day-col"></div>
  </div>
</div>

And

<div class="popover">
    <form action="" method="post" class="">
        <input type="text" placeholder="Событие">
        <input type="text" placeholder="День, месяц, год">
        <input type="text" placeholder="Имена участников">
        <textarea placeholder="Описание"></textarea>
        <button type="button">Готово</button>
        <button type="button">Удалить</button>
    </form>
</div>

the directives themselves

var app = angular.module('calendarApp', []);
app.directive('calendar', function(){
  return {
    restrict: 'E',
    templateUrl: 'tmpl/month.html'
  };
});
app.directive ('addEvent', function () {
  var add = angular.element('<add-event></add-event>');
  return {
    restrict: 'AE',
    templateUrl: 'tmpl/addevent.html',
    replace: true
  }
});
var day_col = angular.element(document.querySelector(".day-col"));
var add = angular.element('<add-event></add-event>');
day_col.on("click", function(e){
  day_col.append(add);
});

The question is why when I click on the blocks, the popover block does not appear?

Answer 1

Because you need $compile

Answer 2

Basically you are not adding directives to the DOM correctly. As mentioned above, when you dynamically add elements, Angular is not aware that they have already appeared in the DOM tree, and you need to use $compile to compile the house structure and bind the elements to the appropriate directives.
But here you make one mistake earlier, by trying to manipulate the DOM structure outside of the directive.
Should add such a directive to the day-col class, then you will not need to look for each element.

app.directive ('dayCol', function ($compile) {
    return {
        restrict: 'С',
        link: link
    };

    function link(scope, element, attr) {
        element.bind('click', function() {
            var addEvent = $compile('<add-event></add-event>')(scope);
            element.append(addEvent);
        });
    }
});