Permission directive in AngularJS -

let's want have directive checks permission. coud this:

<a permissions="something.delete">delete</a> 

if "something.delete" in list of allowed permissions nothing rendered.

having code:

link: function (scope, element, attrs) {    var permissionspromise = permissionservice.checkforpermissions(attrs.permissions);     permissionspromise.then(function(result) {      if (result=== false) {         element.remove();      }   }) } 

but because permissionservice.checkforpermissions() returns promise, may take time figure out permissions, meanwhile link function render a-element before knowing result of permission-check.

what proper solution fix issue?

reverse logic , hide element default , show based on promise value.

something along lines of elem[0].style.display = 'none' -> elem[0].style.display = 'block'

ask real goal, aren't implementing permissions checking on client-side (or shouldn't be). should more provide user correct ui experience. if want remove altogether keep reference parent element, remove element, , when promise returns append parent .. or not.