如何在 AngularJS 中实现以下功能：
如果我的页面将显示一些小部件，并且每个小部件都有一个名为刷新的按钮。单击按钮时，将从服务器重新加载该小部件的内容。重新加载内容时，我想在该小部件中向用户显示一条消息，请稍候……可能会出现淡化效果。
如何在 AngularJS 中实现这一点？
我教过为此目的有一个公共服务，然后每个小部件控制器会以某种方式使用该服务或类似的东西，也许还有一个指令会显示实际的加载/请等待消息？
你有什么建议？
附：当路线发生变化时，还应该有一个加载/请等待消息，整个页面都在淡入淡出……就像在页面之间切换一样。
【问题讨论】：
ng-show 或ng-class 以及每个小部件范围内的布尔变量（例如在指令中）相当容易实现
标签： angularjs angularjs-directive angularjs-ng-repeat angularjs-service
在 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>'
}
});
我没有测试过代码，但指令不会比上面更复杂...
【讨论】：
正如 harish 指出的正确方法是指令，但如果你想包含另一个依赖项，你可以这样做
借助CssLoad
创建一个带有链接函数的指令，以便您可以在控制器中以角度方式调用和停止动画：
.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>
现在您需要做的就是像这样调用控制器中的作用域方法：
$scope.$broadcast('app-start-loading'); // 开始加载动画
$scope.$broadcast('app-finish-loading'); // 停止动画
注意：如果您的所有小部件共享一个范围，则可能会在所有小部件中触发加载
【讨论】：
if all widgets share a scope, the loading may be triggered in all of them 是什么意思？你的意思是小部件共享同一个控制器吗？
在我最近的项目中，我使用的是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>
您还可以自定义将要显示的模板（包括微调器和文本消息）。
【讨论】：