Barry Barry -4 years ago 73
AngularJS Question

AngularJS parent div directive wait for children div stacked directives to complete

I have a portion of html that is like this

<div my-custom-security-directive>
<button ng-if={{some constraints}} ng-click={{logic}}>cancel</button>
<button ng-disabled={{some logic}} ng-click={{some logic}}>submit<button>
</div>


My custom security directive does dom manipulation to the buttons to show/hide them via css. The issue I am having is with timing and perhaps directive precedence? When all the code is finished executing I only see the submit button and not the cancel button. I believe this is because of the ng-if and I attempted to set the priority of my custom directive to a negative number to run last but I think that is only for stacked directives on the same element? I only have a
link
function defined in my directive which my understanding is that is the same as a
post link
function and should run once the children complete? Ultimately, my goal is to run my directive 'last' so that I can show both buttons if all the logic in the directive passes.

The shell of my directive :

angular.module('myModule')
.directive("myCustomSecurityDirective", function(a,b) {
//
return {
restrict: "A",
priority: -1,
link: function(scope, element, attrs, ctrl) {
//custom security role/perm logic using injected services a&b etc
if (userHasPermission ) {
element.find('input, textarea, button').addClass('my-show-css');

}

}
};
});


I did recently /today put that priority on the directive but I don't think it does anything in this particular scenario.

Answer Source

Even if my-custom-security-directive is able to attach a CSS class to the button and hide or show it, the button has its own ng-if condition. This means it's possible that the button could be destroyed and recreated later, and it wouldn't have the CSS class anymore. If the button uses ng-show instead of ng-if you may have more control, since the button would become hidden but remain in the DOM.

But I think my-custom-security-directive might want to have more control. You can use transclusion so that my-custom-security-directive acts as a container for each set of elements which should be destroyed or created based on userHasPermission.

Directive:

.directive('myCustomSecurityDirective', function () {
    return {
        transclude: true,
        link: function (scope) {
            scope.userHasPermission = true;
        },
        template: '<div ng-if="userHasPermission" ng-transclude></div>'
    }
});

HTML:

<div my-custom-security-directive>
    <button ng-if="...">cancel</button>
    <button ng-disabled="...">submit</button>
</div>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download