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.
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.
If you just want to turn off this directive across all app forever, I know two ways:
Create decorator for this directive and just set the compile function to empty function e.g. to angular.noop. Check this stuff for more info: https://docs.angularjs.org/api/auto/service/$provide#decorator .
Or you can also create directive with the same name and restrictions (A|E|C|M), but with higher priority and terminal property setted to true. But you should always keep in mind that this directive will turn off all directives with lower priority on the same element. (so this solution looks like antipattern for me)
I believe you can remove the restrict field using a decorator. this would disable the directive. Here is an example using ng-show
var app = angular.module("app", []);
//disable ng-show
app.config(function($provide) {
$provide.decorator('ngShowDirective', function($delegate) {
var directive = $delegate[0];
directive.restrict = "";
return $delegate;
});
});
