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

Question

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"?

Answer 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.