与AngularJs集成的fancybox [英] Integrate Fancybox with AngularJs

问题描述

我刚开始接触angularjs，我想知道，如果有可能的fancybox集成到angularjs控制器，以便有Ajax请求之间显示的默认的fancybox加载动画。

使用以下code没有任何反应，也没有控制台错误或消息。

如果一些例如code可能的情况下，可以提供那里是使用的fancybox替代解决方案。

感谢。

请注意：我已经定义的NG-视图的div我index.html文件里面

  $ scope.search =功能（）{    $ .fancybox.showLoading（）;    MyApp.query（{
        查询：$ scope.query
    }，功能（价值，responseHeaders响应）{        $ .fancybox.hideLoading（）;    }）;
};
 

解决方案

您需要创建指令的fancybox集成到您的角度code。看看创建一个类似灯箱指令<一个href=\"https://github.com/lmc-eu/ngx-library/blob/master/src/modules/ui/lightbox/lightbox.js\">here.由此可以看出在这里行动。

来到显示在Ajax请求加载动画，使用的fancybox它会不会是正确的，因为这不是它的主要目的。谷歌怎么办阿贾克斯与微调angularjs。的基本思想是为执行请求和响应拦截并显示动画。其中一个例子是present <一个href=\"http://stackoverflow.com/questions/15033195/showing-spinner-gif-during-http-request-in-angular\">here

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();

    });
};

解决方案

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

这篇关于与AngularJs集成的fancybox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！