Как создать Angular-директиву, которая просто вызывает плагин jQuery?

Question

[Максим Иванов]

Прости меня все angular-разработчики, что я такой быдло-кодер и мне приходится сливать jQuery и Angular вместе. Но так получилось, что мне очень нужно вызывать плагины jQuery (которые были написаны не глупыми людьми), например, очень красивый Datetimepicker, который понравился заказчику.

Но каждый раз вызывать плагин на каждый чих при изменении DOM-a или события в Angular, мне не нравится

$scope.setCard = ()=>{
   $scope.card = [1, 2, 3]; // к примеру, какие данные, которые выводятся в DOM посредством компонентов
    
   $(".datatime").datepicker(); // и вот тут то приходится вызывать этот метод, не очень здорово

}

Я был бы рад, если это как-то работало без вызова, если бы компонент (шаблон) знал, что нужно в этом месте вызвать плагин datepicker()

например, просто указал бы атрибут datapicker

<div>
   <span ng-repeat="el in card"> {{ el }}</span> 
   <input class="datetime" datapicker />
</div>

Можно как-то так сделать?

Answer 1

[Markus Kelvin]

angular.directive('datetime', datetimeDirective);

function datetimeDirective() {
   var directive = {
   	restrict: 'C',
        link: link
   }

   return directive;

   function link(scope, element, attrs) {
   	element.datepicker();
   }
}

Comments

[Максим Иванов]

а такое можно только директивой сделать? компонентом нельзя?

[Максим Иванов]

к сожалению не работает!
я сделал html ng-app="myApp" fadeInBody

в итоге функция link так и не срабатывает!

[Markus Kelvin]

Сорри я забыл что element уже является JQuery объектом.
Обновил ответ.
Еще вариант что у вас директива срабатывает раньше появления дом элементов, тогда нужно использовать $timeout чтобы задержать выполнение директивы.
Вы можете скинуть маленкий кусок пример на jsfiddle или plunker чтобы я мог подкорректировать ваш вариант