2

Sometimes when I build an Angular custom directive, I will hear a comment as to, if it is an Angular directive, it should not use jQuery code in it, because it should be built in an AngularJS way.

And I thought it might be true, but is it possible? For example, what if the directive template has 2 sections, one is the words and one is the tiny images (such as review stars), and so you need 2 sections in your template, labeled as .description and .star-images -- so then you should need to use $.find(".description") to find that section inside your template if you need to do something to it or inside it. jqLite won't work as jqLite's find() is limited to tags only.

Another example is, what if you have a directive that doesn't have a template, but just limit the keypress to digits only, say, for an input box. So you don't want your directive to have a template as <input type="text"> but just want the user of the directive to say <input type="text" digits-input-only> and your directive is called digitsInputOnly. So in that case, don't you need to use jQuery's elem.on() or elem.bind() to listen on keypress or keydown events, and when the key down code is not a digit, then do a event.preventDefault()? So in that case, it has to use jQuery?

Or other there other ways to do it so that you really shouldn't need to use jQuery?

nonopolarity
  • 146,324
  • 131
  • 460
  • 740

1 Answers1

4

As a long time user of jQuery it is easy while learning angular to lean on jQuery however none of the cases mentioned are difficult to work around not having it...and in most cases are actually easier

Try removing jQuery completely from your project to avoid temptation and you will quickly realize how little you really need it

The core directives provide the majority of the event handlers needed and angular.element (jQlite) also has bind() which will accept virtually any event name. $document.bind('contextmenu', function(event) for example.

The core dom event directives all let you pass in $event for things like event.preventDefault()

<input ng-keydown="somefunc($event)">

For traverses you can always use a native method to query DOM to find an element and wrap that element (or collection) in angular.element() the same way you would with $(). The more you focus on data models and core directives first however, the less you find need to actually do dom traverses

As for plugins ... it's not a sin to use jQuery plugins in directives. There are some very commonly used angular modules that are wrappers for well known jQuery plugins ... fullcalendar and Datatables are a couple that quickly come to mind along with numerous datepickers. However often you will find situations where you may have previously leaned on a plugin to do simple tasks that angular makes easy itself and you no longer would use such plugins

The sin with using jQuery plugins is using ones that are actually easier to achieve (and test) using angular itself

In conclusion, the biggest adjustment is learning how to focus on data models first, before thinking about the DOM. Also being intimately familiar with the left side menu of the API reference where all the core directives and services are listed is a huge help

charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • using `angular.element()` is like using jQuery, except it is a "tiny version" of jQuery... so my question is... should you use jQuery, and should you even use jqLite at all? – nonopolarity Mar 04 '16 at 14:03
  • Best approach is don't use jQuery .... until you find you need a plugin that is far easier to implement than using angular core. Note that if you do use your own event handlers that changes in scope within those handlers are outside angular context so you need to tell angular to run a digest. Use core directives first, not often you need to bind your own event handlers but if you need to `jQlite` is there to help – charlietfl Mar 04 '16 at 14:07
  • 1
    If you haven't read this post it's well worth reading : [Thinking in angular if I have jQuery background](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) – charlietfl Mar 04 '16 at 14:11