Не добавляется директива в html средствами angular. Почему?

Question

[Николай Семенов]

Здравствуйте.
Коллеги помогите.
Есть два вот таких шаблона директив:

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

И

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

сами директивы Ж

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);
});

Вопрос почему когда щелкаю по блокам, не появляется блок popover'а?

Answer 1

[_ _]

Потому что нужен $compile

Comments

[Николай Семенов]

можно подробнее, куда вставить и как...может ссылка на пример есть...новичек :(

Answer 2

[Markus Kelvin]

По сути вы не правильно добавляете директивы в DOM. Как выше было сказано когда вы динамически добавляете элементы, ангуляр не в курсе что они уже появились в DOM дереве, и нужно использовать $compile чтобы он компилировал дом структуру и привязал элементы к соответствующим директивам.

Но здесь вы совершаете одну ошибку раньше, тем что вне директивы стараетесь манипулировать DOM структурой.

Должен добавить такую директиву на класс day-col, тогда тебе не нужно будет искать каждый элемент.

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);
        });
    }
});