Integrate Fancybox with AngularJs

Question

I am just getting started with angularjs and I would like to know if it is possible to integrate fancybox into an angularjs controller so that there is the default fancybox loading animation shown between ajax requests.

Using the following code nothing happens and there are no console errors or messages.

If some example code could be provided in case where there is an alternative solution using fancybox.

Thanks.

Note: I have defined a div with ng-view inside my index.html file.

$scope.search = function () {

    $.fancybox.showLoading();

    MyApp.query({
        query: $scope.query
    }, function (value, responseHeaders) {

        $.fancybox.hideLoading();

    });
};

Answer 1

You need to create directive to integrate Fancybox into your angular code. Look at a similar Lightbox directive created here. It can be seen in action here.

Coming to showing the loading animation on ajax request, using Fancybox for it would be not be correct as that is not its primary purpose. Google for how to do ajax spinner with angularjs. The basic idea is to implement request and response interceptor and show animation. One such example is present here