Создать директиву, которая вставляет HTML вне того, где он используется

Question

Я создал директиву AngularJS. Эта директива должна вставлять элемент HTML в качестве дочернего элемента body. Этот элемент должен содержать другой настраиваемый компонент, определяемый как директива.

Я пробовал transclude в директиве, что не позволяет мне достичь желаемого результата; поместив элемент в качестве прямого ребенка из body. Подход, о котором я думал, состоял в том, чтобы каким-то образом захватить разметку с templateUrl и ввести в нее «угловой» в DOM непосредственно перед закрытием тега body.

Я действительно стараюсь оставаться открытым с концепцией использования AngularJS ежедневно, эти «вещи» затрудняют это.

Answer 1

В link функции вашей директивы, попробуйте следующее:

link: function(scope, element, attrs) { 
    // The template of the widget to be added elsewhere. 
    // This is different than your directive's own template. 
    var tpl = '<div>some body widget</div>'; 

    // Compile your template, defining a custom cloneAttachFn 
    // to attach the element where you want in the DOM. 
    var appended = $compile(tpl)(scope, function(clonedElement) { 
     $('body').append(clonedElement); 
    }); 
} 

Преимущество делать это в том, что ваш шаблон добавляется скомпилирован с той же областью, как его директива «родственной». Вы можете установить свойства на $scope, которые запускают циклы дайджеста; методы области доступа, определенные в контроллере из прилагаемого шаблона; и все другие нормальные директивные вещи, которые вы ожидаете сделать.

Это все еще похоже на Угловой путь, несмотря на растяжение. Возможно, я что-то пропустил, но этот подход работает для меня.

Также - обязательно вводить $compile в вашу директиву, и не забудьте сделать очистку по размаху уничтожить:

scope.$on('$destroy', function() { 
    appended.remove(); 
}); 

Docs здесь: https://docs.angularjs.org/api/ng/service/$compile