Angularjs custom directive

Hi there,
I'm trying to learn angularjs, everything works fine until custom directive. I jump in a tutorial that claim to be one of the most followed ( now I'm following exactly what he says, but I'm already stuck at the beginning.

I create the basic directive
mainApp.directive('ngSparkline', function() {
  return {
    restrict: 'A',
    template: '<div class="sparkline"></div>'

Open in new window

and in the html I did as he says
<!DOCTYPE html>
<html ng-app="mainApp">
	<link rel="stylesheet" type="text/css" href="../css/main.css" />
	<div ng-sparkline></div>

<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript" src="../js/app.js"></script>

<!-- Directive -->
<script type="text/javascript" src="../js/directive/appInfo.js"></script>


Open in new window

I include for the sake of the discussion as well the css file
   background: #7AB800;
   border: 1px;

Open in new window

I expected that the div will be replaced by the directive, but nothing happened and let me add that if I delete the angular part and I run it as simple html it works fine I got a rectangle filled with that defined color

What's wrong then??
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alexandre SimõesManager / Technology SpecialistCommented:
What do you have in your app.js?

Do you have any Javascript errors?
gokyo66Author Commented:
Hi Alexandre,
no error and my app.js is simple this:
/* Si occupa della creazione del modulo */
var app = angular.module('mainApp', []);

Open in new window

I apologize but the basic directive is this and not the one showed before
app.directive('ngSparkline', function() {
  return {
    restrict: 'A',
    template: '<div class="sparkline"></div>'

Open in new window

Alexandre SimõesManager / Technology SpecialistCommented:
Well, I guess your problem is just that your directive is an empty div.
As it's empty, it doesn't show anything.

Try to add some text in the div and you should see it
app.directive('ngSparkline', function() {
  return {
    restrict: 'A',
    template: '<div class="sparkline">Just some content</div>'

Open in new window

Here's a small Plunker you can play with
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

gokyo66Author Commented:
I tried but nothing changed.
In any case for my understanding even there is no content between the <div> it should change the background color of the div, as it does with plain html and no angular
Alexandre SimõesManager / Technology SpecialistCommented:
A div with no content has no size, as you can see here:
So unless you give it a size, it won't show.

Apart from that, my plunker demo is exactly a copy/paste of your code, and it works.

What version of Angular are you using?
gokyo66Author Commented:
So the question is, why it does works with just plain html?

How can I see the version? I copied this from the angularjs official website
<script type="text/javascript" src=""></script>
Alexandre SimõesManager / Technology SpecialistCommented:
Ok, the version is in the link and inside the file.
In this case is the 1.3.16.
It's exactly the same I'm using in the Plunker demo.

As for the "why it does works with just plain html", probably you set a width and height?
Can you do me a demo in jsfiddle reproducing that behavior?

If you open my simple jsfiddle demo, you see that the empty div is not displayed at all.
gokyo66Author Commented:
Sorry Alexandre, you're totally right about the div w/out content does not show, infact in one of my test there was some information between the tags div and that's why I was seeing the color background.

Still I don't really get it why angular doesn't replace in the html file
<div ng-sparkline>test</div>

Open in new window

<div class="sparkline">Just some content</div>

Open in new window

once compiled
Alexandre SimõesManager / Technology SpecialistCommented:
That directive won't replace the div, it will put the directive template inside <div ng-sparkline></div>

The end result is something like:
<div ng-sparkline="">
    <div class="sparkline">Just some content</div>

Open in new window

How does your directive look like now?
Did you replace it with the one I gave you?

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Alexandre SimõesManager / Technology SpecialistCommented:
Are the paths to your js files correct?
In the dev tools (F12), network tab, do you get a 200 http response loading those files?
gokyo66Author Commented:
Ok tnx for the explanation.

Anyway I just copy/paste your code in my and still doesn't work, I mean I can see only Hello Plunker! Not the directive... that's pretty weird because in Plunker website works properly
Alexandre SimõesManager / Technology SpecialistCommented:
Can you do a zip with all the files on your test and put it here?
gokyo66Author Commented:
Here they are
gokyo66Author Commented:
Forget it Alexandre, now it works, but give me some time to understand why. I'll keep you updated
gokyo66Author Commented:
I really don't get it. I uncommented my html now, and it works... :-o
gokyo66Author Commented:
Well I don't know why now it works and this really scary me a little bit, of course I'm newbie on this subject but at least copy/paste should work.

In anycase you helped me, most of all with some clarification and so website that I wasn't aware of and I really appreciate it.

I don't knwo wich of your answer is the most correct, I'll choose the 40863338 since you give me some light on directive works.

Thnx man
gokyo66Author Commented:
Really helpful and patience...
Alexandre SimõesManager / Technology SpecialistCommented:
Can't tell you. Maybe browser cache?
These changes require a Ctrl+F5 to make sure the browser discards the cache.
IE is particularly picky with this but it's something to be aware on all of them.

If you want to learn AngularJs, I would recommend a small bit of investment in an online course.
I'll be up and running in 4 of 5 hours, and your knowledge will be more deep into how the thing works internally.

Another thing I must advise is that in case you don't really master JavaScript, you should do it before using Angular or similar.
I have these two books I require all my team members to read:

After reading these two books, you'll know more than 90% (I would say 99%) of all developers that ever used JavaScript.

And of course, if you need anything, drop us a question!!! :)
Usually if I see Angular in the title I jump into it.

gokyo66Author Commented:
Alexandre you're such a great guy. Thank you for the extra info. Actually I was following a course in but there was lack of information (from my point of view) over custom directive that's why I try to search something more specific.

I'm using Firefox, but then I tried as well IE but same behaviour. In any case that Plunker web site is great as sandbox I will use it more and now I know that if works there it should work

Really appreciate your support and btw we are no so far away I'm in Switzerland too, but Lugano area

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.