Internal javascript inside angularjs partial view is not working?

问题

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?

回答1:

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.

回答2:

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!

来源：https://stackoverflow.com/questions/27798224/internal-javascript-inside-angularjs-partial-view-is-not-working