Script that handles a tag that is within a angular template file does not work

Question

I have this giant code, which is not necessary show here, but he will manipulate this div:

<div data-calendar="true"></div>

Finding like this:

var calendar = $('[data-calendar]');

The script works if the tag is within my main angular layout file, but when the tag is within a angular template file, the script does not work at all.

How fix that? I already put this script after the angular scripts, in order to make the angular scripts run before, but didn't work at all.

Answer 1

Including the script in the template is never going to work, you need to be able to control when it runs so that it will run any time that div is added, replaced, etc which could happen any time a digest happens.

The best way to do that in this case would be with a directive.

<div calendar></div>

.directive('calendar', function() {
  return {
    link: function (scope, element) {
        element.jqCalendar(); // jQuery plugin should be avail here, if you included jQuery and the plugin before angular.
    }
  };
});