Main thing here is to avoid loading of all JavaScript in index.html
Eg) I have partial view with date picker. Initialization will at the partial view side.
<script>
$(function() {
$('.date-pick').datePicker();
});
</script>
When the partial view loaded via router, the script mentioned above will not be executed. How to execute these kind of internal javascript inside angularjs partial view?
Angular parses the DOM, so if you put a script tag inside, this will obviously not work. You should create a directive for your date picker and use the directive in your partial view like <div date-picker>. Alternatively you could add this piece of JavaScript in your controller, but I wouldn't recommend it. Creating a directive is very easy once you get used to it. Chances are that your datepicker is already available as a directive. Do a Google search on it.
Thanks Erik Duindam.
Created angularjs directive which is shown below
// Directive for jQuery datepicker intialization
app.directive('jqueryDatepicker', function () {
return {
restrict: 'A',
link: function (scope, element, attr) {
$('.date-pick').datePicker();
}
}
});
And in partial view html file i have used created directive
<input name="date1" jquery-datepicker id="date1" class="date-pick"/>
Now the jQuery date picker is initialized in the partial view. Working great!