Angular js directive in module not working correctly

Question

I have one module call "menuLeft", when module he initiate ,not loading correctly my directive, but if run my function en el method "run" correctly. I dont know why is this. This is my code

(function () {

 angular.module('menuLeft', []);

angular.module('menuLeft')
    .run(htmlMenuDirectivaGrupo)
    .directive('ctrlMenuDirectivaGrupo', ctrlMenuDirectivaGrupo);


//MY MENU DIRECTIVE (THIS NOT LOAD)
//MENU GRUPO
/**
 * @ngInject
 */
function ctrlMenuDirectivaGrupo($timeout) {
    alert('hello ctrlmenu');

    return {
        scope: {
            section: '='
        },
        templateUrl: 'partials/menuToogle.tmpl.html',
        link: function ($scope, $element) {
            var controller = $element.parent().controller();

            $scope.isOpen = function () {
                return controller.isOpen($scope.section);
            };
            $scope.toggle = function () {
                controller.toggleOpen($scope.section);
            };
        }
    };


}



 //MY TEMPLATE FOR DIRECTIVE (THIS IF LOAD)
/**
 * @ngInject
 */
function htmlMenuDirectivaGrupo($templateCache) {
alert('hello htmlmenu');
    $templateCache.put('partials/menuToogle.tmpl.html',
        '<md-button class="md-button-toggle"\n' +
        '  ng-click="toggle()"\n' +
        '  aria-controls="docs-menu-{{section.name | nospace}}"\n' +
        '  flex layout="row"\n' +
        '  aria-expanded="{{isOpen()}}">\n' +
        '  {{section.name}}\n' +
        '  <span aria-hidden="true" class=" pull-right fa fa-chevron-down md-toggle-icon"\n' +
        '  ng-class="{\'toggled\' : isOpen()}"></span>\n' +
        '</md-button>\n' +
        '<ul ng-show="isOpen()" id="docs-menu-{{section.name | nospace}}" class="menu-toggle-list">\n' +
        '  <li ng-repeat="page in section.pages">\n' +
        '    <menu-link section="page"></menu-link>\n' +
        '  </li>\n' +
        '</ul>\n' +
        '');


}

})();

Why not load two functions?, there are bad code or declarations? thanks.

Answer 1

the problem is , what my directive nor declaring correctly in .html This is the way we should call it to function properly.

DIRECTIVES

  (function () {

 angular.module('menuLeft', []);

angular.module('menuLeft')
    .run(htmlMenuDirectivaGrupo)
    .directive('menuGrupo', ctrlMenuDirectivaGrupo);


//MY MENU DIRECTIVE (THIS NOT LOAD)
//MENU GRUPO
/**
 * @ngInject
 */
function ctrlMenuDirectivaGrupo($timeout) {
    alert('hello ctrlmenu');

    return {
        scope: {
            section: '='
        },
        templateUrl: 'partials/menuToogle.tmpl.html',
        link: function ($scope, $element) {
            var controller = $element.parent().controller();

            $scope.isOpen = function () {
                return controller.isOpen($scope.section);
            };
            $scope.toggle = function () {
                controller.toggleOpen($scope.section);
            };
        }
    };


}



 //MY TEMPLATE FOR DIRECTIVE (THIS IF LOAD)
/**
 * @ngInject
 */
function htmlMenuDirectivaGrupo($templateCache) {
alert('hello htmlmenu');
    $templateCache.put('partials/menuToogle.tmpl.html',
        '<md-button class="md-button-toggle"\n' +
        '  ng-click="toggle()"\n' +
        '  aria-controls="docs-menu-{{section.name | nospace}}"\n' +
        '  flex layout="row"\n' +
        '  aria-expanded="{{isOpen()}}">\n' +
        '  {{section.name}}\n' +
        '  <span aria-hidden="true" class=" pull-right fa fa-chevron-down md-toggle-icon"\n' +
        '  ng-class="{\'toggled\' : isOpen()}"></span>\n' +
        '</md-button>\n' +
        '<ul ng-show="isOpen()" id="docs-menu-{{section.name | nospace}}" class="menu-toggle-list">\n' +
        '  <li ng-repeat="page in section.pages">\n' +
        '    <menu-link section="page"></menu-link>\n' +
        '  </li>\n' +
        '</ul>\n' +
        '');


}

})();

HTML

  <menu-grupo></menu-grupo>

I recommend reading https://github.com/johnpapa/angular-styleguide

Thanks for all.