如何为带有 class m-menu__toggle 的元素定义 angularjs 指令？

Question

我正在基于 metronic 模板开发一个项目，该模板具有 class m-menu__toggle 的元素由于连字符和下划线，我不确定该指令的名称。

以下无效：

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;

Answer 1

你的指令名称将是 'mMenu__toggle' 因为 camelCase 将被转换为连字符后跟小写

Answer 2

您应该将指令命名为 mMenuToggle。请参阅下面的工作片段。

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

在这里查看原因：Angular directive name: only lower case letters allowed?

如何为带有 class m-menu__toggle 的元素定义 angularjs 指令？

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

angularjs

angularjs-directive