Question

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

enter image description here

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

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

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

你的建议是什么？

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

Answer 1

在我最近的项目中，我使用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>

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

Answer 2

github上提供了这种实现：angular-spinner或angular-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>'
    }
});

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

Answer 3

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

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

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

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

在您的html代码中包含指令：<app-loading></app-loading>
现在您需要做的就是调用控制器中的范围方法，如下所示：

$ $范围广播（＆＃39;应用程序启动装载＆＃39）。 //开始加载动画

$ $范围广播。（＆＃39;应用精加工装＆＃39）; //停止动画

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

AngularJS正在加载消息/请稍候

3 个答案: