last day (14 days later) » 

3:21 PM
1
Q: Append directive to DOM using AngularJS

CameronI've read countless articles on this / questions on Stack Overflow, as well as the documentation, but I don't seem to be able to find an answer for this anywhere. Basically I have the following directive: angular.module('diDirectives', []). directive('ExampleElement', ['$rootScope', '$timeout...

 
You mean that the directive should add itself to the DOM if it doesn't exist? The problem is that the link function won't run unless the directive exists in the DOM. If you want the directive to add itself to the body if it doesn't exist it's still solvable, is this the case?
 
Yes that's EXACTLY the case!
 
Is one of these elements enough or do you need multiple?
 
There should only ever be one of them. The directive basically runs adds the element and then removes it after the timeout, and then that's it.
 
The directive's template contains the directive again, which means there will be a infinite loop. I will post an example of what I hope you are looking for.
 
3:21 PM
Yeah that's because I wasn't sure how to pull the template into the jQuery append.
 
Hey
Just want to make sure I understand your use case correctly :)
 
I think you do :) post an example of how you think it would solve it
 
When the DOM is ready, you want an element to be added automatically and faded in, then faded out?
 
Yes (the fade in and out isn't really that important)
it's more about automatically adding a directive with no prior placeholder
or other html to append to
 
except html and body, I assume?
 
3:25 PM
yes
 
you mean no custom html
 
No I shouldn't require anything in the body like <ExampleElement></ExampleElement>
or other HTML for the directive to talk to
 
You can name your directive 'body', and the directive will compile since there always is a body element in HTML. Is this an acceptable solution?
 
mmmm seems like a shortcoming of angular then though
 
How come?
 
3:27 PM
is it not possible to have a directive append automatically?
 
not via only a directive I think, since the directive code isn't run until the compiler sees it in the HTML
maybe if you tweak the factory function of the directive
 
You have to invoke the directive somehow. It doesn't include itself just by being a script inclusion on your html page, unlike jquery.
 
@RobR Any ideas for how I could do this?
 
Just like tasseKatt said. Invoke this directive from your body element, body class="ExampleElement"
It will append the directive template into the DOM, and then you can put all your DOM manipulation inside the directive's link function.
It's not a shortcoming of Angular. It doesn't include anything until it is referenced. Similar to dependency injection
 
Is this the only way to do this then? Should I be using something different to a directive to do this?
That module appends the loading bar on app load (and subsequent page loads)
 
3:40 PM
You can always "tweak" the directive function to run code once before the actual directive is added to the module.
app.directive('test', directiveFn);
that 'directiveFn' runs code and then returns the actual directive function
 
Could you show a fuller example?
 
sure
 
That chieffacnypants directive using httpInterceptors and the provider feature. You don't need all that for this use case. Using a directive is the right way to append HTML into the DOM, AND apply js functionality to it. Another option is just to use an ng-include file, but anytime you want to do DOM manipulation you want to use a directive for that, so you're on the right track.
 
Okies
So @tasseKATT if you could show how you can app.directive('test', directiveFn); with my example, that might be the solution :)
 
That solution would require you to retrieve the compile service and compiling it manually though, so it might not be very nice. But I can show you an example a bit later.
I would just name your directive 'body' or 'html' and use that.
 
3:58 PM
I'd like to see an example, just out of curiosity :) thanks
 

last day (14 days later) »