Marc Rasmussen Marc Rasmussen - 1 year ago 99
AngularJS Question

Angular directive html not loaded (no errors in console)

So i have the following folder structure:

enter image description here

I have aded the following to my index.html:

<script type="text/javascript" src="js/modules/App/lib/App.js"></script>
<script src="js/modules/Cafe/lib/Cafe.js"></script>
<script src="js/modules/Cafe/directives/cafe-list/cafe-list.js"></script>

And my directive looks like this:

angular.module('Cafe').directive("CafeList", function () {
return {
restrict: "E",
templateUrl: 'js/modules/Cafe/directives/cafe-list/cafe-list.html',
link: function (scope, element, attr) {


my directive html (located in

Looks like this:

<div class="one-half-responsive">
<div class="service-column material-box">
<img src="images/pictures/3s.jpg">

<h3>Mobile and Tablet</h3>
<em>responsive and ready</em>

All your mobile devices are compatible with material, and it will look gorgeous on your whatever
handheld you use!

<div class="more">
<a class="more-link" href="#">READ MORE</a>

my view is rather simple and looks like this:


When i run this i get no errors in the console and all i get in the html is the tag
<cafe-list> </cafe-list>
no inner html

Can anyone see what ive done wrong?

my App module:

* Created by root on 6/3/16.
config(['$locationProvider', '$routeProvider',
function config($locationProvider, $routeProvider) {
when('/', {
templateUrl: 'js/modules/Cafe/views/cafeList.html'
when('/phones/:phoneId', {
template: '<phone-detail></phone-detail>'

and on my html:
<html ng-app="App">

Cafe module located in ('js/modules/Cafe/lib/Cafe.js')

angular.module('Cafe', []);

I can even see that the directive file is loaded!

Answer Source

I suspect that you might be missing an extra closing div tag in your directive. You can also try .directive("cafeList", instead of .directive("CafeList", but I doubt that will make a difference.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download