CODEWITHSUNDEEP
javascriptjqueryangularjs
MadPhysicist
MadPhysicist

Reputation: 5841

$ Is Undefined in Angular or document.getElementById() is Null

I am using the following directive code to make tooltips in my Angular application:

//Creates a directive that is used to display tooltips throughout the application
app.directive('tooltip', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            $(element).hover(function(){
                // on mouseenter
                $(element).tooltip('show');
            }, function(){
                // on mouseleave
                $(element).tooltip('hide');
            });
        }
    };
});

The trouble is that I receive

$ is not defined

in the console. Now, my take is that these are methods from jQuery. Since I have been trying to avoid using jQuery in this app (especially if it is only used for a tooltip), I decided to modify the code as follows:

//Creates a directive that is used to display tooltips throughout the application
app.directive('tooltip', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            document.getElementById(element).hover(function(){
                // on mouseenter
                document.getElementById(element).tooltip('show');
            }, function(){
                // on mouseleave
                document.getElementById(element).tooltip('hide');
            });
        }
    };
});

In the second case, the errors I receive state

Cannot read property hover of Null

How could I clear the errors and avoid using jQuery. Is this possible?

Edit:

I have modified the code as follows to clear the errors:

//Creates a directive that is used to display tooltips throughout the application
app.directive('tooltip', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            element.on('mouseenter', function() {
                element.tooltip('show');
            });
            element.on('mouseleave', function() {
                element.tooltip('hide');
            });
        }
    };
});

However, now the element.tooltip is not a function. Is it possible to win here? :)

Upvotes: 3

Views: 918

Answers (1)

Joah Gerstenberg
Joah Gerstenberg

Reputation: 441

According to the Angular Directive documentation, the element parameter is already a jqLite-wrapped object, so there is no need to call $() or document.getElementById() on it. You can perform operations directly on the element object.

Upvotes: 2

Related Questions