2

I am working on a project basec on the metronic template which has elements with the class m-menu__toggle Because of the hyphen and underscore I am not sure what to name the directive.

The following does not work:

import angular from 'angular';

const module = angular.module('app.directives.menuToggle', []);

module.directive('m-menu__toggle', function() {
  return {
    restrict: 'C',
    link: function(scope, elem, attrs) {
      elem.css('color', 'red');
      elem.css('border', '1px solid red');
      elem.css('cursor', 'help');
    }
 };
});

export default module.name;
lealceldeiro
  • 14,342
  • 6
  • 49
  • 80
Juan Pablo Fernandez
  • 2,408
  • 3
  • 18
  • 32

2 Answers2

2

You should name your directive mMenuToggle. See below working snippet.

(function() {
  angular
    .module('app', [])
    .directive('mMenuToggle', fun);

  function fun() {
    return {
      restrict: 'C',
      link: function(scope, elem, attrs) {
        elem.css('color', 'red');
        elem.css('border', '1px solid red');
        elem.css('cursor', 'help');
      }
    }
  }

})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <span class="m-menu__toggle"> Element </span>
</div>

See why here: Angular directive name: only lower case letters allowed?

lealceldeiro
  • 14,342
  • 6
  • 49
  • 80
1

your directive name wuold be 'mMenu__toggle' cause camelCase will be converted to hyphen followed by lowercase

shall
  • 154
  • 9