How to assign a js function to a block in angular?

Question

Angular

There is some js function - fullCalendar() in the included file. Big.
On the old version of the page:

<script>
$(document).ready(function () {
            $('#calendar').fullCalendar();
        });
<script>
...
<div id="calendar">
</div>

After these gestures, let's say a calendar was drawn in this block.
Now, without changing the included file with js functions, I need to do the same, but with the help of AngularJS.
And on this kind of primitive thing, I butted in. That is, this line

<script>
$(document).ready(function () {
            $('#calendar').fullCalendar();
        });
<script>

must be changed in accordance with the logic of Angular so that the same object is drawn in the block on the page using fullCalendar ().
How to do it?

Answer 1

Write a directive for the #calendar element.
Suppose it was and will become so a directive in a separate file like my-calendar.directive.js

function Directive () {
  return {
    restrict: 'A',
    link: link
  };

  function link (scope, element) {   
      element.fullCalendar();
  }
}

angular
  .module('app.shared')
  .directive('my-calendar', Directive);