Angular custom directive, including dashes in name, doesn't work

Question

I wrote the following Angular directive, which will add the “required” attribute for 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 no longer works. Why is “required” but not “required by all”?

Answer 1

Angular converts camelCasing to a serpentine body, so your requireall directive should be renamed to requireAll , then you can use require-all in your markup (or data-require-all if you want to tag custom tags correctly). For a while, it confused me.

Answer 2

Rename the directive to "requireAll";

 .directive("requireAll",…) 

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