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



我有一个模块调用"menuLeft",当他启动模块时,没有正确加载我的指令,但如果正确运行我的函数,方法"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' +
        '');

}
})();

为什么不加载两个函数?,是否存在错误的代码或声明?谢谢

用这样的东西。

   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> '
};

问题是,我的指令或在.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

谢谢大家。

最新更新