使用AngularJS调用jQuery插件函数

Question

i spent a lot of time trying to call jQuery plugin function using angular. So far no success. I want to use fancybox(jQuery) plugin using angularJS.

My fiddle: http://jsfiddle.net/lukiux666/LyaespL1/ fiddle is set to jQuery 2.2.1 so you can see how it has to look, but i need the same using only angular.

I need to call this function jquery in angularjs:

$(document).ready(function() {
$(".fancybox").fancybox(); 
 });

my last attempt was

angular.module('MyApp', [])
.controller('MyCtrl', [function() {

angular.element(document).ready(function () {
    angualr.element(".fancybox").fancybox();
});
}]);

I really need this to work, thank you so much in advance.

Answer 1

Use angular directives, I change your fiddle and implement with directives,

angular.module('MyApp', [])

.directive('fancybox', [function() {
    function link($scope, $element){
        $element.fancybox();
    }
    return {
       restrict: 'AE',
       link: link
    }
}]);

look this fiddle