Nieodłącznym elementem nowoczesnych stron internetowych jest JavaScript. Bardzo popularną biblioteką opartą na JavaScript jest jQuery. Posiada ona wiele gotowych pluginów,  dzięki którym tworzenie stron internetowych stało się szybsze gdyż nie musimy tworzyć kodu od podstaw.
Angular JS jest frameworkiem, który w ostatnim czasie zdobywa coraz większą popularność. Co prawda zawiera w sobie podzbiór jQuery (pod nazwą jQLite), jednak z różnych względów potrzebujemy skorzystać z pluginu jQuery.

Jak to zrobić?

Tworząc dyrektywę (ang. directive) w Angular JS.

Przykład.

Zademonstruje to na przykładzie pluginu Gips wyświetlającego podpowiedzi (tooltip) po najechaniu na odpowiedni element.

Na początku tworzymy plik index.html i deklarujemy potrzebne skrypty:

 <link rel="stylesheet" href="/style.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="/gips.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
  <script src="/app.js"></script>

Tradycyjna inicjalizacja pluginu jQuery wygląda następująco:

<div id="center">
        <div id="header">
        </div>
        <div id="demo">
            <input type="text"  value="Purple Tooltip Here." id="purple" />
            <input type="text"  value="Green Tooltip Here." id="green" />
            <input type="text"  value="Yellow Tooltip Here." id="yellow" />
            <input type="text"  value="Red Tooltip Here." id="red" />
        </div>
    </div>
    
    <!-- Tradycyjna inicjalizacja pluginu-->
    <script type="text/javascript">
        $(document).ready(function () {
            $('input#purple').gips({ 'theme': 'purple', autoHide: true, text: 'This is purple tooltip, auto hide after pausess time elapses.' });
            $('input#green').gips({ 'theme': 'green', placement: 'left' });
            $('input#yellow').gips({ 'theme': 'yellow', autoHide: true, placement: 'right' });
            $('input#red').gips({ 'theme': 'yellow', autoHide: true, placement: 'right' });
        });
    </script>

Teraz zróbmy to za pomocą dyrektywy Angular JS.

var appDirectives= angular.module('app.directives', []);
 /*directive - gips jquery plugin*/
appDirectives.directive('gipsPlugin', function() {
  return {
		// Restrict it to be an attribute in this case
		restrict: 'A',
		// responsible for registering DOM listeners as well as updating the DOM
		link: function(scope, element, attrs) {
		    $(element).gips(scope.$eval(attrs.gipsPlugin));
		}
	};
});

W końcu do elementów input na których ma się pojawiać podpowiedź należy przypisać argument, w tym przypadku gips-plugin, wraz z parametrami. Przykładowo:

<input type="text" gips-plugin="{ 'theme': 'purple', autoHide: true, text: 'This is purple tooltip, auto hide after pausess time elapses.' }" value="Purple Tooltip Here." id="purple" />
<input type="text" gips-plugin="{ 'theme': 'green', placement: 'left' }" value="Green Tooltip Here." id="green" />
<input type="text" gips-plugin="{ autoHide: true, placement: 'right' }" value="Yellow Tooltip Here." id="yellow" />
<input type="text" gips-plugin="{ 'theme': 'red', placement: 'bottom' }" value="Red Tooltip Here." id="red" />

 Demo znajduje się tutaj

 Za pomocą tej samej dyrektywy możemy inicjalizować różne elementy używając innych parametrów.