CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-directive
Marc Rasmussen
Marc Rasmussen

Reputation: 20545

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!

Upvotes: 1

Views: 568

Answers (2)

pradeep1991singh
pradeep1991singh

Reputation: 8365

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>

Upvotes: 1

noobie
noobie

Reputation: 60

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.

Upvotes: 3

Related Questions