AngularJS: Prepend HTML using Directive

Question

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 1

Your code only needs a simple change. Switch the before function which does not exist to prepend ( You said that you have tried it but I'm sure this is the solution to this problem ).

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

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

Answer 2

You can do it this way:

<wave-spinner id='spinner00' ng-show='isLoadingContent'></wave-spinner> 
<div id="header00" style="">Some Content</div>

and in service.js

 this.showSpinner = function () {
     this.isLoadingContent = true;
 };