[SOLVED] using jquery plugin in browserify along with angular

using jquery plugin in browserify along with angular

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.

Solution

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

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');
```

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

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