Directive name and attribute name clashing

Question

I encountered a problem with clashing directive and attribute names. This is a simplified version of my problem: there are two directives, where the name of the first direct

Answer 1

Just extending my comment to answer, Instead of renaming the directive on way i could think of is to create a copy of the same directive and invalidate the existing one. That way you could have a proper naming conventions for poorly named directives that you are consuming from another module. Here you need

• $compileProvider

  • To register a new directive, overriding the angular directive constructor app.directive.

• $provide service

  • To decorate the directive with poor name, get its definition and return back just a blank no operation factory.
  • You can decorate a directive postFixing with Directive keyword. They are also registered as a factory.

You need to make sure this configuration, especially the decoration part appears after the targeted directives are registered.

app.config(['$compileProvider', function ($compileProvider) {
    //Override directive constructor
    app.directive = function (name, dirObject) {
        //Register a directive
        $compileProvider.directive(name, function() {
           return dirObject[0];
        });
    };
}]).config(['$provide', function($provide){
    //Decorate target directive
    $provide.decorator('propertyDirective', ['$delegate', function($delegate){
        //Just register a new directive with source's definition
        app.directive('cmProperty', $delegate);
        //return a no operation factory as directive constructor, to make it inactive
        return function() { return angular.noop };
    }]);
}]);

Demo

You could automate this by placing the target directive names in a constant and running a loop of decorators to automatically prefix/rename(recreate with another name) it.

---

Update

See a generic solution in my repository