AngularJs Directive for Tooltip

Question

Я хочу создать директиву, которая показывает подсказку (from AngularJs Bootstrap UI) на основе пользователя, авторизованного или нет.

Это делает работу хорошо и добавить необходимые атрибуты tooltip и tooltip-position но подсказка не появляется.

Если я сравниваю элемент, сгенерированный моим кодом и элементом, который имеет всплывающую подсказку как обычный html, его идентичный, кроме class="ng-scope", добавление этого класса вручную не помогает.

Вот моя директива код:

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.'); 
       }); 
      }); 
     } 
    }; 
}]); 

Любая идея кто?

Update 3 удалили '$compile(element), поскольку он говорит, что его неопределенная функция, и изменил использование функции $ применяются. все еще получая ошибку «$ digest уже в процессе».

Новый код:

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

Попробуйте использовать $compile так:

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

Другой способ справиться с такого рода вещи было бы просто есть контроллер, который делает доступными в его область видимости переменной или функции, которая определяет доступ, а затем использовать нг скрытие и ng-show в dom для настройки ваших всплывающих подсказок или что-то еще.

<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>