AngularJS-一个很好的加载器想法，但不知道怎么做

我寻找了一个很好的加载器指令，并想到了一个很酷的想法，但我不知道如何实现它

拥有代码时：

<div loader="loaderVariable">
   <div>staff and things</div>
</div>

我希望它显示该div中的加载程序，直到loaderVariable变为false。当它这样做时，它会隐藏加载程序并意外地显示主div中的内容：

<div loader="true">
   Loading...
</div>
<div loader="false">
   <div>staff and things</div>
</div>

---

有没有一种方法可以通过指令实现这一点？

该指令已经存在，称为ngShow：

用法

<div ng-show="isLoading">
   Loading...
</div>
<div ng-show="!isLoading">
   <div>staff and things</div>
</div>

模板，根据您的需要进行编辑：

附加CSS：

.加载内容{ 显示：无； } 例如，还可以在元素上设置使用标记、ng加载：

{{data.name} {{data.position}} {{data.office} 示例使用脚本：

$scope.isLoading=true； $scope.data=null； $http{ 方法：“GET”， 网址：'https://api.myjson.com/bins/4dq3j' }.Then函数成功回调响应{ $scope.data=response.data； $scope.isLoading=false； }

---

演示->

你至少应该试着让它发生。在这里粘贴一些角度代码，如果您遇到困难，您将得到帮助。如果我想这样做，我甚至可以使用两个指令。ng显示和ng隐藏。我只是想知道，是否有一种方法可以像我建议的那样做到这一点，所以我的代码对我来说会更干净：@Amit，OK-已经用一个指令和一个使用$http源填充一个实例更新了答案。

<div ng-show="isLoading">
   Loading...
</div>
<div ng-show="!isLoading">
   <div>staff and things</div>
</div>