AngularJS directives don't work. can anyone help?

1

Hi everyone,

I’m currently at challenge 202 in FCC. it’s all going great!

but I’m also following an Angular.js course somewhere else and following along building my own app.
however, I’m stuck and the course itself doesn’t provide me with answers. So i was hoping one of you guys could help!

Right now I have a store where there’s a picture and some descriptions, specs and reviews. I wanted to put each element in their own file and make a directive for them in app.js. Only now when I click on description or specs, nothing happens… it used to work great when everything was in the same index.html file.

underneath I’ll post what i have now:

this is the HTML, I’ve also tried to do it without the h4 or as an Attribute. but it won’t work.

<h4><product-description ng-show="tab.isSet(1)"></product-description></h4>

this is the product-description.html.

<blockquote>{{product.description}}</blockquote>

and the the app.js directive.

app.directive("productDescription", function() {
  return {
    restrict: 'E',
    templateUrl: "product-description.html"
  };
});

Note that I pretty much copied the code in the course itself. but it wont do anything,
in the product-description I did add the head tags but this doesn’t seem to work. My head is starting to spin in frustration, I hope someone can help.

2

Hey. Could you post your code somewhere? You can use Plunkr and create a new plunk with AngularJS 1.5.x (you can add different files there).

3

https://plnkr.co/edit/48uh0oADJdJFsaIb4JVc?p=preview

here you go, without images, but that doesn’t matter. it’s about the description and the specs that don’t work

4

Thank you! So, first of all, what’s the PanelController for?

Aside from that, it works just fine for me if I create an external file for both product-description and product-specs; so I’m having an hard time figuring out what your issue was. Maybe you can compare this plunkr with your code to catch any difference.

I just removed Bootstrap (the javascript file), the PanelController and the h4 wrapping the directive (but just for cleaning up the code, everything worked fine with them as well).

You can see it here.

5

Check out your templateUrl path. I think it should be relative to root of the project.
Also I would strongly recommend to start learning angular 2/4. Nobody really uses angular 1 anymore.

1 Like
6

Thanks for the help.
I’m still trying to get the hang of all the versions and frameworks around.
I’m studying towards a development job, I’m in contact with the CEO of a company who tells me what to learn. their job opening said you they use AngularJs 1, I figured it was this one. Please correct me if I’m wrong!

7

Thanks!
I’ll check it more closely when I’m at home, plunkr doesn’t work on smartphones.

8

It’s so weird.

I tried to find the difference, but couldn’t, so I just copied all of it to a new file in Atom en opened it. Still doesn’t work, so the problem must there somehow.
It’s really frustrating 'cause I’ve spend hours trying to make it work. I was more hoping that there would be a clear stupid fault of mine…
about the PanelController, I forgot why it’s there, I think it was part of the course but later replaced by something else.

9

Does any error about those two files (product-description.html and product-specs.html) appear in the network tab of chrome dev tools?

10

Hi, sorry for the late respons, I have been working last couple of days, haven’t been able to look at the code.
There are several errors.
Hope you can make something of them, it seems there’s an overlaps or something…

chrome-errors
chrome-errors1600×900 761 KB

11

You can’t fetch template files due to cors issue.
You need to launch a local server to make it work.