CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
Lemex
Lemex

Reputation: 3804

AngularJS Directive Not Showing

This has completely driven me up the wall for hours now.

I have my app.js

    'use strict';

/**
 * @ngdoc overview
 * @name myWellnessTrackerApp
 * @description
 * # myWellnessTrackerApp
 *
 * Main module of the application.
 */
angular
  .module('myWellnessTrackerApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

My main.html which is loaded into the main page on load as shown above.

<innerPageHeader> </innerPageHeader>

My directive.

angular.module('myWellnessTrackerApp')
  .directive('innerPageHeader' ,function () {
    return {
      template: '<h4>TEST</h4>',
      restrict: 'E'
    };
  });

And my index.html scritps:

<!-- build:js(**/*) scripts/vendor.js -->
<!-- bower:js -->
<script src="components/modernizr/modernizr.js"></script>
<script src="components/jquery/dist/jquery.js"></script>
<script src="components/angular/angular.js"></script>
<script src="components/angular-animate/angular-animate.js"></script>
<script src="components/angular-cookies/angular-cookies.js"></script>
<script src="components/angular-resource/angular-resource.js"></script>
<script src="components/angular-route/angular-route.js"></script>
<script src="components/angular-sanitize/angular-sanitize.js"></script>
<script src="components/angular-touch/angular-touch.js"></script>
<script src="components/fastclick/lib/fastclick.js"></script>
<script src="components/jquery.cookie/jquery.cookie.js"></script>
<script src="components/jquery-placeholder/jquery.placeholder.js"></script>
<script src="components/foundation/js/foundation.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/about.js"></script>
<script src="scripts/directives/innerpageheader.js"></script>

When loading the page it just shows 

<innerPageHeader> </innerPageHeader>

With no directive content which should be 

<innerPageHeader><h4>TEST</h4> </innerPageHeader>

Upvotes: 0

Views: 1989

Answers (2)

Schw2iizer
Schw2iizer

Reputation: 845

I'm sure you've already figured this out but the reason is because of normalization. During normalization, Angular converts - delimited name to camelCase.

This is why you should use camelCase while specifying the directive inside AngularJS.

Upvotes: 4

thedoctor
thedoctor

Reputation: 1518

You need to use the directive as follows.

<inner-page-header></inner-page-header>

Upvotes: 5

Related Questions