Custom Angular directive including a dash in the name doesn't work

问题

I've written the following Angular directive that will add the "required" attribute to all children:

.directive("requireall", function($compile) {
  return {
    restrict: 'A', //only want it triggered for attributes
    compile: function(element, scope) {
      // Prevent infinite loop on compile
      element.removeAttr("requireall");

      var allChildren = element.find('*');
      allChildren.attr('required', 'required');
      $compile(element)(scope);
    }
  }
});

I really want to call it "require-all" but if I rename it then it doesn't work anymore. Why is "requireall" working but not "require-all"?

回答1:

Angular converts camelCasing to snake-casing, so your requireall directive needs to be renamed to requireAll, then you can use require-all in your markup (or data-require-all if you want to correctly markup custom tags). Confused me for a while at first.

回答2:

Rename the directive to "requireAll";

.directive("requireAll",…)

And a directive named abcDef can be used as abc-def in the markup.

来源：https://stackoverflow.com/questions/25807763/custom-angular-directive-including-a-dash-in-the-name-doesnt-work