AngularJs Directive pour info-bulle

Question

Je souhaite créer une directive qui affiche l'info-bulle (from AngularJs Bootstrap UI) en fonction de l'utilisateur autorisé ou non.

Il fait bien le travail et ajouter les attributs requis tooltip et tooltip-position mais l'info-bulle ne se présente pas.

Si je compare l'élément généré par mon code et l'élément qui a une info-bulle comme html normal, son identique, sauf class="ng-scope", l'ajout de cette classe manuellement n'aide pas.

Voici mon code de directive:

proGamersApp.directive('registered', ['$rootScope', 'authService', function ($rootScope, authService) { 
    return { 
     restrict: 'A', 
     scope: true, 
     link: function ($scope, element, attrs) { 
      element.addClass('faded'); 

      $rootScope.$watch('user.role', function (role) { 
       $scope.$apply(function() { 
        var accessLevel = routingConfig.accessLevels[attrs.accessLevel]; 
        if (!authService.authorize(accessLevel)) { 
         element.attr('tooltip-placement', 'bottom'); 
         element.attr('tooltip', 'Avaiable for registered users.'); 
        } else 
         element.attr('tooltip-placement', 'bottom'); 
        element.attr('tooltip', 'Avaiable for registered users.'); 
       }); 
      }); 
     } 
    }; 
}]); 

Toute idée qui que ce soit?

Mise à jour 3 supprimé la «$compile(element) puisqu'il dit sa fonction non définie, et changé l'utilisation de la fonction $ appliquer. toujours obtenir l'erreur '$ digest déjà en cours'.

Code:

proGamersApp.directive('registered', ['$rootScope', 'authService', function ($rootScope, authService, $compile) { 
    return { 
     restrict: 'A', 
     scope: true, 
     link: function ($scope, element, attrs) { 
      element.addClass('faded'); 

      $rootScope.$watch('user.role', function (role) { 
       var accessLevel = routingConfig.accessLevels[attrs.accessLevel]; 
       if (!authService.authorize(accessLevel)) { 
        element.attr('tooltip-placement', 'bottom'); 
        element.attr('tooltip', 'Avaiable for registered users.'); 
       } else { 
        element.attr('tooltip', 'Avaiable for registered users.'); 
       } 

       $scope.$apply(element); 
      }); 

     } 
    }; 
}]); 

Answer 1

Essayez d'utiliser $compile comme ceci:

proGamersApp.directive('registered', ['$rootScope', 'authService', '$compile', 
function ($rootScope, authService, $compile) { 
    return { 
     restrict: 'A', 
     scope: true, 
     link: function ($scope, element, attrs) { 
      element.addClass('faded'); 
      $rootScope.$watch('user.role', function (role) { 
       var accessLevel = routingConfig.accessLevels[attrs.accessLevel]; 
       if (!authService.authorize(accessLevel)) { 
        element.attr('tooltip-placement', 'bottom'); 
        element.attr('tooltip', 'Avaiable for registered users.'); 
       } else { 
        element.attr('tooltip', 'Avaiable for registered users.'); 
       } 
       $compile(element.parent().contents())($scope); 
      }); 
     } 
    }; 
}]); 

Answer 2

Une autre façon de gérer ce genre de chose serait d'avoir juste un contrôleur qui met à la disposition dans son champ une variable ou une fonction qui détermine l'accès, puis utilisez ng-cache et ng-show dans le dom pour configurer vos infobulles, ou peu importe.

<div data-ng-controller="SessionCtrl"> 
    <div data-ng-hide="session.active()"> 
     put your logged in user stuff here 
    </div> 
    <div data-ng-hide="session.active()"> 
     put your non logged in user stuff here 
    </div> 
</div>