Angular 模块中的 js 指令无法正常工作

Question

我有一个模块调用 "menuLeft"，当他启动模块时，没有正确加载我的指令，但是如果运行我的函数 en el 方法 "run" 正确。我不知道这是为什么。这是我的代码

(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' +
        '');


}

})();

为什么不加载两个函数？有错误的代码或声明？谢谢。

Answer 1

Use something like this . .

   return {
    restrict: 'E',
    scope: {            
        section: '='
    },
    controller: ['$scope', function ($scope){..}],
    link: function (scope, element, attrs) {..},
    template:   '<div class="bootsrtap">'+
                    '<input type="text" ng-model="searchParam"  placeholder="{{ attrs.placeholder }}"'+
                        'class="{{ attrs.inputclass }}"'+
                        'id="{{ attrs.inputid }}"'+
                         'ng-required="{{ autocompleteRequired }}" />'+
                '</div> '
};

Answer 2

问题是，我的指令也没有在 .html 中正确声明这是我们应该调用它才能正常运行的方式。

指令

  (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>

我推荐阅读https://github.com/johnpapa/angular-styleguide

谢谢大家。

Angular 模块中的 js 指令无法正常工作

Angular js directive in module not working correctly

angularjs

angularjs-directive

angularjs-routing

angularjs-module