using jquery plugin in browserify along with angular

Question

I am trying to use a tooltip plugin called tipso. And I am using angular along with browserify as my dependency manager.

I have everything working out for me except for this plugin. Every little thing is little harder in browserify but this one seems to be turning into a nightmare.

I have followed the documentation of tipso which is pretty simple. But when I run the app, I keep getting an error message stating that Uncaught TypeError: $(...).tipso is not a function in the chrome console.

This is my broserify-shim config

   "browserify-shim": {
   "jquery": "$",
   "bootstrap": {
     "depends": [
       "jquery"
     ]
   },
   "tipso": {
       "depends": [
           "bootstrap"
       ]
    }
  }

I have required tipso

var tipso = require('tipso');

This is how I have initialized tipso

//runs when DOM is completely loaded
angular.element(document).ready(function ($http, $rootScope) {    
    $('.tipso').tipso();
});

Any suggestion will be appreciated.

Answer 1

I finally figured it out, I hope this helps someone.

1. The trick is to expose jQuery in the global scope (I know I am not supposed to do this and the alternative for this is to expose it wherever I want the plugin to work).

   global.$ = global.jQuery = require('jquery');
   

2. Once that is done, we'll make an Angular directive

   rootModule.directive('cooltip', function () {
     return {
         restrict: 'A',
         link: function (scope, element, attributes) {
             $(element).tipso({
                 position: 'right',
                 delay: 600
           });
         }
      };
   });
   

3. Use this directive to use apply the jQuery plugin's properties on an element in html

   <button cooltip class="btn"> Hover over me </button>
   

Depending on the jQuery plugin and it;s funtionality decide on the directive type (Element, Attribute, Comment etc).

Answer 2

If you're using it like $(...).tipso per the error, and you're requiring jQuery as $ per your Browserify Shim config, I'm assuming Tipso is a jQuery plugin. You need to specify that this it depends on jQuery, like so:

 "browserify-shim": {
   "jquery": "$",
   "bootstrap": {
     "depends": [
       "jquery"
     ]
   },
   "tipso": {
       "depends": [
           "jquery",
           "bootstrap"
       ],
    "exports": "$.fn.tipso"
    }
  }