AngularJS оленья кожа «самонастройки» новые элементы DOM

Question

У меня есть приложение, которое AngularJS (уменьшенный до соответствующих частей) выглядит следующим образом:

<div ng-app="myModule"> 
    <div id='container'> 
     <div say-hello-to name="Frank">f</div> 
     <div say-hello-to name="Billy">b</div> 
    </div> 
</div> 

приложение работает отлично. Теперь, если после процесса угловой начальной загрузки я добавляю новый элемент dom, который соответствует директиве, он не интерпретируется. Обратите внимание, что «Дополнение» выполняется с помощью JavaScript-кода, отличного от Angularjs.

<div say-hello-to name="Dusty">d</div> 

это просто «мертвый» div.

JsFiddle Ссылка: http://jsfiddle.net/Nn34X/

Вопрос: Как я могу добавить новый DOM элемент в приложение и пусть AngularJS знают, что есть новый элемент должен интерпретироваться (я мог бы легко указать angularjs точно все вставлено элементы)

Приветствия и спасибо заранее!

Answer 1

Получить $injector услуг:

var $injector = angular.element(document.querySelector('#container')).injector(); 

Выберите элемент:

var element = angular.element(document.querySelector('[name="Dusty"]')); 

Используйте сервис $ форсунки для получения $compile службы и связать элемент с областью:

$injector.invoke(function ($compile) {  
    var scope = element.scope(); 
    $compile(element)(scope); 
}); 

Демонстрация: http://jsfiddle.net/6n7xk/

Краткое объяснение: Call Angular JS from legacy code