Skip to content

Instantly share code, notes, and snippets.

@ameyms

ameyms/apply_plugin.js

Created January 26, 2015 23:03
Show Gist options
  • Save ameyms/4f3a5d6a8d329609d44e to your computer and use it in GitHub Desktop.
Save ameyms/4f3a5d6a8d329609d44e to your computer and use it in GitHub Desktop.
Download ZIP
A directive and provider pair to apply arbitrary JQuery plugins to elements
Raw
apply_plugin.js
angular.module( 'ameyms.jqplugin' ).
directive( 'applyPlugin', [ 'jqueryPlugins', function ( jqPlugins ) {
var postLinkFn;
postLinkFn = function ( scope, elem, attrs ) {
var currPlugin = attrs.applyPlugin,
opts = jqueryPlugins.getOptionsFor( currPlugin );
// Apply plugin
$( elem )[ currPlugin ]( opts );
};
return {
restrict: 'A',
link: postLinkFn
};
} ]
);
Raw
jquery_plugins.js
angular.module( 'ameyms.jqplugin' ).
provider( 'jqueryPlugins', function () {
var pluginOptions = {};
this.$get = function () {
return {
getOptionsFor: function ( pluginName ) {
return pluginOptions[ pluginName ];
},
setOptions: function ( pluginName, opts ) {
pluginOptions[ pluginName ] = opts;
return this;
}
};
};
} );
Raw
module.js
angular.module( 'ameyms.jqplugin', [] );
@ameyms
Copy link
Author

ameyms commented Jan 26, 2015

Usage:

In your Javascript:

angular.module( 'mymodule' ,['ameyms.jqplugin'])
angular.module( 'mymodule' ).config(function(jqueryPlugins){
    jqueryPlugins.setOptions('myplugin', {foo: 1, bar: 'Hello, World'});
});

And in your templates:

<div apply-plugin="myplugin"></div>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment