Remove a directive from module in Angular

Question

We are trying to figure out if there is a way to remove/replace/override a set of directives temporarily whilst in a 'preview' mode.

We have tried removing the module(s) that the directives are contained in, e.g.:

angular.module('myModule', []);

but the directives are still active.

Can anyone help?

Answer 1

Internally AngularJS creates factories from directives, by adding a suffix to the directive name. So you can disable the directives by replacing the factories with noop factories.

var noopDirective = function() { return function () {}; };
if (previewMode) {
    // Disable ngPaste directive
    angular.module('myModule')
        .factory('ngPasteDirective', noopDirective);
}

Make sure this is the last executed code.

Answer 2

As an alternative, consider putting a preview mode into each of the directives. Pass in an attribute to indicate whether the current state is preview or 'live', and conditionalize the directive template with ng-switch.

Tastes vary, but that feels like a more legible approach to me than redefining the directives on-the-fly.