CODEWITHSUNDEEP
javascriptjquerynode.jsangularjs
Reydel Leon
Reydel Leon

Reputation: 1075

Running jQuery code in MEAN.JS stack

I'm starting to work with NodeJS, and more expecifically with MEAN.JS. I'm trying to run some custom JS code, using JQuery, but no matter where i put the code, it nevers runs as expected. This is my script:

$(document).ready(function(){
    var tooltips = $('[data-toggle="tooltip"]');
    tooltips.tooltip();
});

I tried putting it in the body of the page, in a separate script, but nothing. When I debug in Chrome, the variable tooltips does not contain any elements, but if I execute the same code in Chrome's console, then it works. It seems to me that despite the $(document).ready() thing, the DOM is not ready when the code executes. Maybe AngularJS is doing its magic at the same time and that interferes.

Is there somethign i need to do so that the code will get executed? Do I have to load it after/before something?

Thanks for any help.

Upvotes: 2

Views: 1747

Answers (2)

Kevin B
Kevin B

Reputation: 95057

I would suggest creating a directive instead of applying it in a dom ready:

angular.module("myModule")
    .directive('tooltip', function () {
        return {
            restrict: 'A',
            link: function (scope, elem) {
                $(elem).tooltip();
            }
        }
    });

Now, any time you use the tooltip or data-tooltip attribute on an element in one of your templates, the tooltip plugin will be applied to it.

Disclaimer: i have not tested this code, and in the end would suggest not using jquery for this. Instead, use angular-bootstrap-tooltip or a similar angular solution

Upvotes: 1

SamT
SamT

Reputation: 10620

Tooltips will not contains any elements as it is limited to the scope of the anonymous function you specified for $(document).ready(). Second, "tooltips" is misspelled in the variable declaration. Try this code to help you debug:

$(document).ready(function(){
    window.$tooltips = $('[data-toggle="tooltip"]');
    $tooltips.tooltip();
});

Now you can go into the console and evaluate the variable $tooltips to see if it is there. Note: I prefixed the variable with a $ to help identify it as a jQuery object. Don't confuse it with the built-in Angular services.

Also, Angular will not execute JavaScript within templates it generates pages from. Be sure to specify external JavaScript in the main page output or place this code to be executed when Angular loads the view.

Upvotes: 0

Related Questions