CODEWITHSUNDEEP
javascriptangularjs
siannone
siannone

Reputation: 6763

Angular nested directive is not compiled

I have two nested directives in my AngularJS project. The HTML is the following:

<body ng-app="main">
    <mainapp></mainapp>
</body>

An the main.js is the following:

var mainDirective = angular.module('main',
    [
        'app.config',
        'app.ui.menu'
    ]);

mainDirective.directive('mainapp', [
    'ConfigService',
    function(config)
    {
        return {
            restrict    : 'E',
            templateUrl : config.path.views + '/index.html'
        }
    }
]);

The content of the template is the following:

<menu-index></menu-index>
<div class="ui basic segment">
    <div class="ui vertically padded grid">
    More html here

For some reasons the app.ui.module is not working properly (I know that is included because I don't receive any error). This is the 'app.ui.module':

var menuIndex = angular.module('app.ui.menu', ['app.config']);

menuIndex.directive('menu-index', ['ConfigService', function(config)
{
    return {
        restrict    : 'E',
        templateUrl : config.path.views + '/menu/index.html'
    }
}]);

I don't know why the first <main></main> directive is working but the second <menu-index></menu-index> (the nested one) is not.

Upvotes: 1

Views: 70

Answers (1)

Josh
Josh

Reputation: 44916

When you register a directive, by convention it is supposed to be camel cased:

menuIndex.directive('menuIndex', ...)

You have registered yours as snake-case

Upvotes: 2

Related Questions