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 — Abhishek
– Abhishek, Commented Jun 28, 2016 at 6:48

T J · Accepted Answer · 2016-06-28 06:47:35Z

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, 2016 at 6:47

T J

43.2k13 gold badges87 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

morels · Accepted Answer · 2016-06-28 09:22:34Z

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.

Collectives™ on Stack Overflow

how to create an angular directive to load jquery?

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related