Angular directive html not loaded (no errors in console)

Question

So i have the following folder structure:

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!

try to put a console.log inside the controller/link directive to see if it is loaded — AlainIb
– AlainIb, Commented Jun 4, 2016 at 19:18
@AlainIb it doesnt run the console.log() but how can that be? when i can see in my source — Marc Rasmussen
– Marc Rasmussen, Commented Jun 4, 2016 at 19:32
Where is the Cafe module initially declared? I see that you have angular.module('Cafe'), but that references an existing Cafe module. Did you perhaps mean to have angular.module('Cafe', []) instead? — Lex
– Lex, Commented Jun 4, 2016 at 19:38
Would you mind updating your question with the code where Cafe is declared initially? — Lex
– Lex, Commented Jun 4, 2016 at 19:40

noobie · Accepted Answer · 2016-06-04 19:26:27Z

3

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.

edited Jun 4, 2016 at 19:26

answered Jun 4, 2016 at 19:17

noobie

607 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pradeep1991singh · Accepted Answer · 2016-06-04 19:49:25Z

1

One issue with you directive is your directive name as in angular if you want to name two word directive then it should be in 'snake case' which will translate into 'camel case'.

// directive
angular.module('Cafe').directive('cafeList', function() {
  return {
    restrict: 'E',
    template: 'js/modules/Cafe/views/cafeList.html'
  }
});

// call directive
<cafe-list></cafe-list>

answered Jun 4, 2016 at 19:49

pradeep1991singh

8,4054 gold badges24 silver badges31 bronze badges

Collectives™ on Stack Overflow

Angular directive html not loaded (no errors in console)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related