Marc Rasmussen Marc Rasmussen - 6 months ago 10
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
js/modules/Cafe/directives/cafe-list/cafe-list.html


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>

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

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




my view is rather simple and looks like this:

<div>
<cafe-list></cafe-list>
</div>


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.
*/
angular.module('App',[
'ngRoute',
'Cafe'
]).
config(['$locationProvider', '$routeProvider',
function config($locationProvider, $routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'js/modules/Cafe/views/cafeList.html'
}).
when('/phones/:phoneId', {
template: '<phone-detail></phone-detail>'
}).
otherwise('/phones');
}
]);


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

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.