AngularJS disable directive

angularjs, javascript

Solution

It is possible to remove directive with another directive. For this, new directive should have higher priority than the one being removed, then in compilation state you search for elements with required directive and remove tag/class/element wholetogether. Here's a very simple realisation of this:

.directive("disableDirective", function () {
    function compile (el, attr) {
        var hasDirective = el[0].querySelectorAll("["+attr.disableDirective+"]");

        [].forEach.call(hasDirective, function (el) {
            el.removeAttribute(attr.disableDirective);
        });
    }

    return {
        priority: 100000,
        compile: compile
    };
})

In the following HTML DIV will be visible, thanks to our directive:

<body disable-directive="ng-hide">
  <div ng-hide="true">Hidden</div>
</body>

You'll have to set `disable-directive="editable-text"` for the page.

JSBin.

Problem

I am using the `editable-text` directive from the `xeditable` module for AngularJS. Is there a way to disable the directive for the entire page? I thought about using replacing editable-text with `{{variable}}`, where `variable="editable-text"` to enable and `variable="somethingElse"` to disable. However, this produces meaningless attributes in the html.

Original source