An approach to use jQuery Plugins with AngularJS

http://amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/

by marhaba

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://paulkinzett.github.com/toolbar/css/documentation.css">
<link rel="stylesheet" href="http://paulkinzett.github.com/toolbar/css/toolbars.css">
<link rel="stylesheet" href="http://paulkinzett.github.com/toolbar/css/bootstrap.icons.css">
<script src="http://paulkinzett.github.io/toolbar/js/jquery.toolbar.js"></script>
<div ng-app="Toolbar">
    <div id="format-toolbar1" class="settings-button" toolbar-tip="{content: '#format-toolbar-options', position: 'top'}">
        <img src="http://paulkinzett.github.com/toolbar/img/icon-cog-small.png">
    </div>        
    <div id="format-toolbar2" class="settings-button" toolbar-tip="{content: '#format-toolbar-options', position: 'left'}">
        <img src="http://paulkinzett.github.com/toolbar/img/icon-cog-small.png">
    </div>
    
    <div id="format-toolbar-options">
        <a href="#"><i class="icon-align-left"></i></a>
        <a href="#"><i class="icon-align-center"></i></a>
        <a href="#"><i class="icon-align-right"></i></a>
    </div>	
</div>

CSS

#format-toolbar1, #format-toolbar2 {
    margin-left: auto;
    margin-right: auto;
}

#format-toolbar-options { display: none; }

JavaScript

var App = angular.module('Toolbar', []);

App.directive('toolbarTip', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).toolbar(scope.$eval(attrs.toolbarTip));
        }
    };
});