javascript - 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

您需要创建指令以将 Fancybox 集成到您的角度代码中。查看此处创建的类似 Lightbox 指令。可以在这里看到它的作用。

在 ajax 请求上显示加载动画时，使用 Fancybox 是不正确的，因为这不是它的主要目的。谷歌了解如何用 angularjs 做 ajax spinner。基本思想是实现请求和响应拦截器并显示动画。这里有一个这样的例子