Angular. Директивы для динамически добавленных элементов не работают.?

Question

[Сергей Гладышев]

Доброго дня.
Имеется такой код.

var left_elements = angular.element(document.querySelector("body"));
var left_elementsE = left_elements.find('.js-content_left__elements');				
var newLi = angular.element("<li>");
var newA = angular.element("<a>");
newA.attr("href", "#");
var newSpan = angular.element("<span>");
newSpan.addClass("glyphicon");
newSpan.addClass("glyphicon-remove");
newSpan.addClass("pull-right");
var newNumber=$("ul").find($("li")).length;
newSpan.attr("data-id", newNumber+1);
newSpan.attr("ng-click", "ngDelete("+(newNumber+1)+");");
						
left_elementsE.append(newLi);
newLi.append(newA);	

newA.append($scope.blur);
newA.append(newSpan);

В результате к списку элементов li добавляется ещё один элемент li

<li>
<a href="#">111<span class="glyphicon glyphicon-remove pull-right" data-id="4" ng-click="ngDelete(4);"></span>
</a>
</li>

Но ngDelete на этом, динамически созданном элементе, не срабатывает.
Я знаю, что в этом случае надо использовать $compile, но в Angular -е я ещё пока что новичок, поэтому просьба ткнуть носом в пример решения для моего случая...

Answer 1

[Николай]

https://docs.angularjs.org/api/ng/service/$compile
Если простым языком - нужно заинжектить $compile и вызвать у новых элементов, можно до добавления в DOM.

p.s. для списка почти никогда не нужно добавлять элементы руками. Заведите массив элементов и выводите его через ng-repeat.