Using $compile to manipulate angular directives from a custom directive - angularjs

Question

I'm creating a directive which would disable all elements inside the element to which it is applied. For simplicity, lets assume only buttons are disabled. In the directive link function I'm just setting the disabled attribute for the elements to be disabled. This is working fine, but the problem comes in scenarios where some of the buttons have ng-disabled attributes, In such cases, the buttons become disabled/enabled based on the condition in ng-disabled, thus ignoring the directive logic.
So I thought of making use of $compile and fix it with the following approach:
When buttons need to be disabled,
1) Add disabled attribute to the buttons.
2) Check if buttons have 'ng-disabled' attribute. If so,keep its value in the same DOM element under a different attribute name.
3) Delete the ng-disabled attribute.
4) Recompile to reflect the change in attributes (So there will not be any ngDisabled checks on recompilation).
When buttons are re-enabled,
1) Remove disabled attributes
2) Check for attribute created in step (2) of above and add it to the ng-disabled attribute
3) Remove the backup attribute
4) Recompile
But this is not working.The ngDisabled conditions are still evaluated even when the attribute is not there.
Directive Code:
function disableElements($compile) {
return {
restrict: "A",
scope: {
disableElements: "="
},
link: function (scope, elem, attr) {
scope.$watch('disableElements', function (newVal) {
var buttons;
var ngDisabled;
var backup;
buttons = elem.find('button');
if (newVal) {
buttons.attr('disabled', 'disabled');
for (var i = 0, j = buttons.length; i < j; i++) {
ngDisabled = $(buttons[i]).attr('ng-disabled');
if (typeof ngDisabled !== typeof undefined && ngDisabled !== false) {
$(buttons[i]).attr('backup', ngDisabled).removeAttr('ng-disabled');
}
}
$compile(elem.contents())(scope);
} else {
buttons.removeAttr('disabled');
for (var i = 0, j = buttons.length; i < j; i++) {
backup = $(buttons[i]).attr('backup');
if (typeof backup !== typeof undefined && backup !== false) {
$(buttons[i]).attr('ng-disabled', backup).removeAttr('backup');
}
}
$compile(elem.contents())(scope);
}
});
}
};
}
Sample View and Controller
<input type="text" ng-model="vm.val">
<div disable-elements="vm.disableAll">
<button type="button" ng-disabled="vm.val.length===0" ng-click="vm.buttonClicked()">With ng disabled</button>
<button type="button" ng-click="vm.buttonClicked()">Without ng disabled</button>
</div>
<label><input type="checkbox" ng-model="vm.disableAll">Disable all</label>
function SampleController() {
this.disableAll = true;
this.val = '';
this.buttonClicked = function () {
alert("click");
}
}
jsfiddle here
Please let me know what is wrong with this code or if it is the right approach to this issue.

Answer 1

re-compiling the content doesnt unlink the previously compiled directive.
There is, actually, no easy way to do what you wanna do. The only correct approach will be to stop using ng-disable to use your own custom-disable directive which would be aware of it's parent directive "globallyDisabled" state.