has-authority not working on a button

Question

So I used JHipster to generate my app.

I could see the navbar using the has-authority directive to show/hide menus.

Now what I would to do is to use the directive on a button to show it only to users with ROLE_ADMIN

here's the code of the directive

.directive('hasAuthority', ['Principal', function (Principal) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var setVisible = function () {
                    element.removeClass('hidden');
                },
                setHidden = function () {
                    element.addClass('hidden');
                },
                defineVisibility = function (reset) {

                    if (reset) {
                        setVisible();
                    }

                    Principal.hasAuthority(authority)
                        .then(function (result) {
                            if (result) {
                                setVisible();
                            } else {
                                setHidden();
                            }
                        });
                },
                authority = attrs.hasAuthority.replace(/\s+/g, '');

            if (authority.length > 0) {
                defineVisibility(true);

                scope.$watch(function(scope) {
                    return Principal.isAuthenticated();
                }, function(newValue) {
                    defineVisibility(true);
                });
            }
        }
    };
}]);

here's where it's working

<li ng-class="{active: $state.includes('admin')}"  ng-switch-when="true" has-authority="ROLE_ADMIN" class="dropdown pointer">

and here is where I want it to work

<table class="jh-table table table-striped">
    <thead>
        ...
    </thead>
    <tbody>
        <tr
            ng-repeat="offeredService in travelRequest.offeredServices track by offeredService.id">
            <td><a
                ui-sref="offeredServiceType.detail({id:offeredService.offeredServiceType.id})">{{offeredService.offeredServiceType.name}}</a>
            </td>
            <td>{{offeredService.sellingPrice}}
                {{offeredService.currency.symbol}}</td>
            <td>{{offeredService.cost}}
                {{offeredService.currency.symbol}}</td>
            <td>{{offeredService.confirmationDate | date:'medium'}}</td>
            <td><a
                ui-sref="serviceProvider.detail({id:offeredService.serviceProvider.id})">{{offeredService.serviceProvider.name}}</a>
            </td>
            <td class="text-right">
                <div class="btn-group flex-btn-group-container">
                    <button type="submit"
                        ui-sref="offeredService.detail({id:offeredService.id})"
                        class="btn btn-info btn-sm">
                        <span class="glyphicon glyphicon-eye-open"></span> <span
                            class="hidden-xs hidden-sm" translate="entity.action.view"></span>
                    </button>
                    <button type="submit"
                        ui-sref="offeredService.edit({id:offeredService.id})"
                        class="btn btn-primary btn-sm">
                        <span class="glyphicon glyphicon-pencil"></span> <span
                            class="hidden-xs hidden-sm" translate="entity.action.edit"></span>
                    </button>
                    <button has-authority="ROLE_USER" type="submit"
                        ui-sref="offeredService.delete({id:offeredService.id})"
                        class="btn btn-danger btn-sm">
                        <span class="glyphicon glyphicon-remove-circle"></span> <span
                            class="hidden-xs hidden-sm" translate="entity.action.delete"></span>
                    </button>
                </div>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

It seems to me that your condition is wrong:

<button has-authority="ROLE_USER" type="submit"
                        ui-sref="offeredService.delete({id:offeredService.id})"
                        class="btn btn-danger btn-sm">

An admin user has both authorities ROLE_USER and ROLE_ADMIN.

So in your case the button will always show. Shouldn't it be like below?

<button has-authority="ROLE_ADMIN" type="submit"