Рендеринг скомпилированного шаблона из контроллера в Angular JS

Question

Я пытаюсь отобразить html в DOM с директивами AngularJS

HTML

<a ng-click="doThing()">hello 2015</a>

За исключением ограничений в моем приложении, я должендобавьте его в представление из контроллера.Я пытаюсь сделать это, используя сервис $compile.

Controller.js

let html = '<a ng-click="doThing()">hello 2015</a>';

const compiledTemplate = $compile(html)($scope);

document.getElementById('wrapper').innerHTML = compiledTemplate[0].innerHTML;

$scope.doThing = function(){

    console.log('it worked!');
}

View.html

<div id="wrapper"></div> 

Это делает правильный HTML, но директивы не работают.Нажатие на ссылку не запускает функцию doThing().

Как я могу скомпилировать и отобразить строковое представление шаблона AngularJS, чтобы все угловые директивы работали?

Answer 1

Ваш код не работает, потому что вы просто копируете необработанную строку HTML из скомпилированной директивы - ни одна из привязок не копируется, только строка.

Лучше всего звонить $compile() с элементом HTML, а не со строкой HTML, например:

//find the wrapper DOM element
const directiveTarget = document.getElementById('wrapper');

//put the raw HTML into it
directiveTarget.innerHTML = '<a ng-click="doThing()">hello 2015</a>';

//get the angularjs-friendly version of the element
const directiveElement = angular.element(directiveTarget);

//initialise AngularJS bindings
const compiledTemplate = $compile(directiveElement)($scope);