AngularJS正在加载消息/请稍候

时间:2014-11-19 14:17:32

标签: angularjs angularjs-directive angularjs-ng-repeat angularjs-service

如何在AngularJS中实现以下功能:

enter image description here

如果我的页面会显示一些小部件,每个小部件都有一个名为refresh的按钮。单击该按钮后,将从服务器重新加载该窗口小部件的内容。在重新加载内容时,我想向用户显示该窗口小部件中的消息,请稍候......可能会出现淡入淡出效果。

如何在AngularJS中实现这一目标?

我有点教过为此目的提供一个共同的服务,然后不知何故每个小部件控制器将使用该服务或类似的东西,也许还会显示实际加载/请等待消息的指令?

你的建议是什么?

P.S。当路由发生变化时,应该还有一个加载/请等待消息,整个页面都会消失...就像在页面之间切换一样。

3 个答案:

答案 0 :(得分:4)

在我最近的项目中,我使用https://github.com/cgross/angular-busy

非常好的事情,你所要做的就是将你的诺言放入$ scope,然后将cg-busy attr添加到你的元素中,该元素应该有微调器(显然在注册模块旁边):

控制器:

$scope.myPromise = restangular.get('something',12).then(function(response) { ... })

HTML:

<div cg-busy="myPromise"></div>

您还可以自定义要显示的模板(包括微调和短信)。

答案 1 :(得分:2)

github上提供了这种实现:angular-spinnerangular-sham-spinner。阅读此BLOG,其中详细说明了微调器如何与angularjs一起使用

如果你想自己实现它可以重复使用......

app.directive("spinner", function(){
    return: {
        restrict: 'E',
        scope: { enable: "=" },
        template: '<div class="spinner" ng-show="enable"><img src="content/spinner.gif"></div>'
    }
});

我没有测试过代码,但是指令不会比上面更复杂......

答案 2 :(得分:1)

正如harish指出正确的方式将是一个指令,但如果你想要包括另一个依赖,你就可以做这样的事情

  1. 您可以在CssLoad的帮助下创建一个不错的CSS3加载(因此不需要图像)动画

  2. 使用链接功能创建一个指令,这样您就可以以有角度的方式调用和停止控制器中的动画:

    .directive('appLoading', function(){
        return {
            restrict: 'E',
            templateUrl: 'template-file.html', // or template: 'template html code inline' Display none to the code is important so is not visible if youre not caling the methods
            replace: true,
            link: function(scope, elem) {
                scope.$on('app-start-loading', function(){
                    elem.fadeIn(); //asumming you have jquery otherwise play with toggleClass and visible and invisible classes
                });
                scope.$on('app-finish-loading', function(){
                    elem.fadeOut();
                });
            }
         }
     })
    
  3. 在您的html代码中包含指令:<app-loading></app-loading>

  4. 现在您需要做的就是调用控制器中的范围方法,如下所示:

    $ $范围广播(&#39;应用程序启动装载&#39)。 //开始加载动画

    $ $范围广播。(&#39;应用精加工装&#39); //停止动画

  5. 注意:如果您的所有小部件共享一个范围,则可以在所有小部件中触发加载