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.

How do I show directive before div header00? .append works with directive but not .prepend to add any html content before matched div element.
When directive is called again, how do I remove existing html. remove() is not working for me.

Diana R · Accepted Answer · 2016-09-21 07:45:46Z

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;
 };

answered Sep 21, 2016 at 7:45

Diana R

1,1741 gold badge9 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Slimshadddyyy Over a year ago

wave-spinner will be prepend and I have shown final dom. Also how do I remove it first when user again performs the same action ?

Diana R Over a year ago

if you want to have it not just hidden but not generated in html, then use ng-if instead of ng-show, the ng-if doesn't generate the element in the dom, the only trick is that it creates an additional inner scope. I would use a single method, and just negate the current value of isLoadingContent like this this.isLoadingContent = !this.isLoadingContent; and call the method in both cases when you need to show/hide.

Slimshadddyyy Over a year ago

wave-spinner will be prepend to div and not showing/hiding onload

Diana R Over a year ago

Then I do't see any point in the ng-show='true' and your approach is more jQuery then angular approach. I don't really see why not have it in the html itself but have to append/prepend it. Please elaborate on why you stick to the approach you have?

Slimshadddyyy Over a year ago

Coz I want the directive to be called when user performs any action and not on page load

|

Mozahler · Accepted Answer · 2018-12-01 18:48:03Z

0

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/

edited Dec 1, 2018 at 18:48

Mozahler

5,3636 gold badges42 silver badges63 bronze badges

answered Sep 21, 2016 at 9:20

Maciej Sikora

20.3k4 gold badges52 silver badges50 bronze badges

Collectives™ on Stack Overflow

AngularJS: Prepend HTML using Directive

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related