AngularJs Directive for Tooltip

Question

I want to create a directive that shows Tooltip (from AngularJs Bootstrap UI) based on user is authorized or not.

It does the job well and add the required attributes tooltip and tooltip-position but the tooltip doesn't show up.

If i compare the element generated by my code and element that has a tooltip as normal html, its identical except class="ng-scope", adding this class manually doesn't help.

Here is my directive code:

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

Any idea anyone?

Update 3 removed the '$compile(element) since it says its undefined function, and changed the use of the $apply function. still getting '$digest already in progress' error.

New 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);
            });

        }
    };
 }]);

Not sure if I did it right, but I added it (see update) and nothing changed. — Aviran Cohen
– Aviran Cohen, Commented Sep 25, 2013 at 16:25
I've added it as it suppose to be, have a look at the updated post. — Aviran Cohen
– Aviran Cohen, Commented Sep 28, 2013 at 22:08

AlwaysALearner · Accepted Answer · 2013-09-30 05:59:15Z

1

Try using $compile like this:

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

answered Sep 30, 2013 at 5:59

AlwaysALearner

43.9k9 gold badges98 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aviran Cohen Over a year ago

My code needed some code modification in order to work properly, but your attitude did solve the problem. I would be grateful if you will explain why you used 'element.parent().contents()' instead of 'element'.

AlwaysALearner Over a year ago

I guess that is because we want to compile the element itself while contents() returns the child elements. Not too sure though :D

aet · Accepted Answer · 2013-09-26 15:55:08Z

1

Another way to handle this kind of thing would be to just have a controller that makes available in it's scope a variable or function that determines access, then use ng-hide and ng-show in the dom to setup your tooltips, or whatever.

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

answered Sep 26, 2013 at 15:55

aet

7,3023 gold badges29 silver badges26 bronze badges

5 Comments

Aviran Cohen Over a year ago

Thanks, but I prefer the way I did since its more cleaner having 'accessLevel' directive using an 'authService'. My problem is making the tooltip visible, since there seem to be problem in the way it bootstrap tooltip works with my code (note the element itself is the same, but the tooltip don't show up).

aet Over a year ago

Ok, then look at what the other guy was saying, you could inject the $compile service into your directive, not create a compile function. Then $compile the element after you have added the bootstrap directive attributes.

Aviran Cohen Over a year ago

Thanks for the help. I've added it at the place you said, I get 'Error: $digest already in progress', have a look at the updated post.

aet Over a year ago

You are doing it in the $apply function, don't do that. Do what you need to do and call $apply afterwards.

Aviran Cohen Over a year ago

I've used it as you said, still getting '$digest already in progress' error. have a look in my new code, maybe I missed something

Collectives™ on Stack Overflow

AngularJs Directive for Tooltip

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related