Angular and mixing jQuery UI – Why not?

by

Using JQuery like this means that you are not declaratively expressing what your app does in the HTML which is kind of the point of Angular.

From the angular homepage:

AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

Your also going to run into a lot of trouble down the road with code like 

$(document).ready(function() { $("#calendar").datepicker(); });

As Angular has no idea when this has finished or what has changed. If you start using stuff like this you will need a strong understanding of how dirty checking and the digest cycle work in Angular.

Your date picker won’t play nice with other directives either. For example if you put this in an ng-if and hide and show it then the date picker will not be there anymore.

Have you looked into libraries like Angular UI Bootstrap or Angular Strap. They both provide date pickers that work out of the box with Angular.

More Related Contents:

  1. how to convert the float 9.88 number to integer 9 in angularjs?
  2. ‘this’ vs $scope in AngularJS controllers
  3. How can I dynamically add a directive in AngularJS?
  4. Binary files corrupted – How to Download Binary Files with AngularJS
  5. Combating AngularJS executing controller twice
  6. AngularJS – Does $destroy remove event listeners?
  7. Difficulty with ng-model, ng-repeat, and inputs
  8. Sending event when AngularJS finished loading
  9. AngularJS vs Angular [closed]
  10. AngularJS – pass function to directive
  11. AngularJS – How to structure a custom filter with ng-repeat to return items conditionally
  12. How to skip the OPTIONS preflight request?
  13. Error: 10 $digest() iterations reached. Aborting! with dynamic sortby predicate
  14. How to select an element by classname using jqLite?
  15. Angularjs: input[text] ngChange fires while the value is changing
  16. Angular.js: How does $eval work and why is it different from vanilla eval?
  17. angular $q, How to chain multiple promises within and after a for-loop
  18. AngularAMD + ui-router + dynamic controller name?
  19. how to inject dependency into module.config(configFn) in angular
  20. Angular JS: how to bind to promises
  21. Order by Object key in ng-repeat
  22. Sharing data between directives
  23. Angular JS resizable div directive
  24. “Uncaught Error: [$injector:unpr]” with angular after deployment
  25. AngularJS – Filter empty objects
  26. Angular sanitize / ng-bind-html not working?
  27. AngularJS Dynamic loading a controller
  28. Force HTTP interceptor in dynamic ngSrc request
  29. npm install -g karma error MSB4019: The imported project “C:\Microsoft.Cpp.Default.props” was not found
  30. How to pass .env file variables to webpack config?

Leave a Comment