CODEWITHSUNDEEP
angularjsangularjs-directive
Juan Pablo Fernandez
Juan Pablo Fernandez

Reputation: 2546

How can I define an angularjs directive for elements with the class m-menu__toggle?

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;

Upvotes: 2

Views: 41

Answers (2)

lealceldeiro
lealceldeiro

Reputation: 15008

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?

Upvotes: 2

shall
shall

Reputation: 154

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

Upvotes: 1

Related Questions