how to create an angular directive to load jquery?

Question

i want to use jSignature jquery plugin with my mvc+angular js project,but i am unable to load the jquery in the project since i dont have a proper directive to load it,help is needed.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>
<script src="jquery.signature.js"></script>
<script>
    $(function () {
        $('#sig').signature();
        $('#clear').click(function () {
            $('#sig').signature('clear');
        });
        $('#json').click(function () {
            alert($('#sig').signature('toJSON'));
        });
        $('#svg').click(function () {
            alert($('#sig').signature('toSVG'));
        });
    });
</script>
</head>
<body>

this is the code i used alongside the jquery plugin,but a directive is required to properly load the jquery,some help is needed to write the directive?

Possible duplicate of [Correct way to integrate jQuery plugins in AngularJS](http://stackoverflow.com/questions/16935095/correct-way-to-integrate-jquery-plugins-in-angularjs) — Abhishek, Jun 28 '16 at 06:48

score 2 · Answer 1 · answered Jun 28 '16 at 06:47

2

You don't need a directive to load jQuery. Just include jQuery before including AngularJS, angular will use jQuery instead of jQlite.

answered Jun 28 '16 at 06:47

T J

42,762
13
83
138

score 1 · Answer 2 · answered Jun 28 '16 at 09:22

The best practice to include third party js code is to create a directive that wraps code in the link function:

app.directive('myDir', function() {
  return {
    link:link
  };

  function link($scope, $element, $attr){

      (function ($) {
        $('#sig').signature();
        $('#clear').click(function () {
            $('#sig').signature('clear');
        });
        $('#json').click(function () {
            alert($('#sig').signature('toJSON'));
        });
        $('#svg').click(function () {
            alert($('#sig').signature('toSVG'));
        });
      }(jQuery));
  });

});

And finally include the directive where needed.

how to create an angular directive to load jquery?

2 Answers2