Angular nested directive is not compiled

Question

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.

main is a standard HTML5 tag. I think that shouldn't interfere with your using it as a directive, but for clarity it might be better to rename it. — Thomas
– Thomas, Commented Jan 19, 2015 at 14:10
Also, templates should be standalone HTML fragments; you can't just open div tags and close them in a subsequent template. I think the browser is going to insert </div> tags here automatically. — Thomas
– Thomas, Commented Jan 19, 2015 at 14:13
@Thomas I updated the code with your suggestion but it's still not working. I also noticed that if I rename <mainapp></mainapp> to <main-app></main-app> the whole main module is not working anymore. Furthermore there are no HTML fragments, I just didn't write the code for the whole page to make the question easier to read. — siannone
– siannone, Commented Jan 19, 2015 at 14:18

Josh · Accepted Answer · 2015-01-19 14:21:45Z

2

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

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

You have registered yours as snake-case

answered Jan 19, 2015 at 14:21

Josh

45k7 gold badges106 silver badges125 bronze badges

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

3 Comments

siannone Over a year ago

Thank you, you made my day! Are there other conventions for services, controllers and filters?

Josh Over a year ago

@siannone - Yes, but less often an impact on what you do. For instance, Angular really only has one type... a Provider. Everything else is just syntactic sugar around those. What this means is that even if you register a service as .service('myService', ...) you can still access it's provider using 'myServiceProvider'.

siannone Over a year ago

Thank you again, I wish you a nice day.

Collectives™ on Stack Overflow

Angular nested directive is not compiled

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related