Call the jQuery function or plugin specified on the element.
This example shows how to call the bootstrap tooltip with almost no work:
Not every jQuery plugin requires creating a new directive just to use it. Instead, use the pass-through directive to rapidly port functionality. It is probably the best solution for 75% of the cases you will encounter.
If a plugin requires more robust integration with AngularJS then you may need to look into creating a custom directive instead, or contact us with a request.
To call something like $.fn.tooltip() simply do
ui-jq="tooltip". Note that the name of the function must be identical. This also works for normal jQuery commands such as
$.fn.slideUp().
To pass parameters use the ui-options attribute. The value will be evaluated in the
$scope context and passed to the function. If defaults are set, the passed options will extend them. If a string is passed, the default options will be ignored.
Use the directive name jq for namespacing inside
uiJqConfig. Then sub-namespace options for each function by the name of that function (exactly as it is passed to
ui-jq) so that you don't have to pass options every time you call the directive.
<a title="Easiest. Binding. Ever!" ui-jq="tooltip">Hover over me for static Tooltip</a>
<a data-original-title="{{tooltip}}" ui-jq="tooltip">Fill the input for a dynamic Tooltip:</a>
<input type="text" ng-model="tooltip" placeholder="Tooltip Content">
<script>
myModule.value('uiJqConfig', {
// The Tooltip namespace
tooltip: {
// Tooltip options. This object will be used as the defaults
placement: 'right'
}
});
</script>