Как задать блоку в ангуларе функцию js?

Question

[toriakR]

Есть некая функция js - fullCalendar() в подключаемом файле. Большая.
В старом варианте страницы:

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

После этих телодвижений в этом блоке отрисовывался, допустим, календарь.
Теперь же мне надо, не меняя подключаемый файл с js функциями, сделать тоже самое, но с помощью AngularJS.
И на этой вроде примитивной вещи я встрял. Т.е., эта строка

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

должна быть изменена в соответствии с логикой ангулара, чтобы в блоке на странице отрисовывался тот же объект посредством fullCalendar().
Как это сделать?

Answer 1

[Василий Мажекин]

Напишите директиву для элемента #calendar.
Допустим был
<div id="calendar"></div> а станет так <div my-calendar></div>

директиву в отдельном файле типа 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);