I am working on web application and it uses a lot of JQuery plugins .. when I load a partial view , the static resources are not initialized . should I consider neglecting the idea of single page web app and go with multiple pages? since it will be difficult to initialize lots of plugins and more over am not a master of java script..
...
Add a comment
|
2 Answers
$(document).ready() is useless in an angular app since most elements don't exist when page loads.
Many plugins can be simplified to use angular methods but if you must use plugins they need to be initialized within angular directives. A directive link function only runs when element actually exists.
Also see if the plugins you are using don't already have angular module wrappers. For example angular-ui-bootstrap completely replaces bootstrap.js library
Comments
If there isn't already an angular wrapper, you can create a directive that does the initialization. The link option in a directive serves a similar purpose to $(document).ready() - each time a particular directive is loaded, the link function is called for that element. Here's a simple example using jquery-ui datepicker. (There are better ways to do a datepicker in angular, this is just for the sake of a simple illustration.)
Directive:
app.directive("datePicker", [function() {
return {
restrict: "A",
link: function(scope, element, attrs) {
$(element).datepicker();
}
}
}]);
HTML for a template (... is all the other configuration for the input)
<input date-picker ... />
Here's a plunk demonstration. (Note that you have to load angular after jQuery and jQueryUI for this to work properly.)
