Question

我正在使用metronic模板上的一个项目基础，该模板具有类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

您应该为您的指令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?

Answer 2

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

如何使用类m-menu__toggle为元素定义angularjs指令？

2 个答案: