Slimshadddyyy Slimshadddyyy - 2 months ago 18
AngularJS Question

AngularJS: Prepend HTML using Directive

Service.js

this.showSpinner = function (Id) {

angular.element("<wave-spinner id='spinner00' ng-show='true'></wave-spinner>").remove();
var myEl = angular.element(document.querySelector("#header00"))
myEl.prepend($compile("<wave-spinner id='spinner00' ng-show='true'></wave-spinner>")($rootScope));
};


HTML

<div id="header00" style="">Some Content</div>


I tried using
prepend
method as mentioned in jQlite, but its not working.


  1. How do I show directive before div
    header00
    ? .append works with
    directive but not .prepend to add any html content before matched div
    element.

  2. When directive is called again, how do I remove existing html.
    remove()
    is not working for me.


Answer

Your code need only simple change, from before function which not exists to prepend ( You sad that You have tried it but I am sure this is solution of this problem ).

myEl.prepend($compile("<wave-spinner id='spinner00' ng-show='true'></wave-spinner>")($rootScope));

To be sure I checked that in jsFiddle - https://jsfiddle.net/maciejsikora/u5vLvxmx/

Comments