Question

我找了一个很好的装载机指令，想到了一个很酷的主意，但我不知道如何实现它。

获得代码时：

<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>

有没有办法（使用指令）？

Answer 1

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

$scope.isLoading = true;

用法

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

<强>更新即可。这是一个隐藏内容并显示ajaxLoad图标的指令。一旦传递给指令的变量设置为false，它将隐藏图标并显示内容：

.directive('ngLoading', function() {
  return { 
    transclude: true, 
    templateUrl : 'ngLoading.html',
    link: function (scope, element, attributes) {
      scope.$watch(attributes.ngLoading, function(newValue, oldValue) {
        if (!newValue) {  
          element[0].querySelector('.loading-ajaxLoad').style.display = 'none';
          element[0].querySelector('.loading-content').style.display = 'block';
        }  
      })           
    } 
  } 
});

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

<img class="loading-ajaxLoad" width="20" src="http://press.solarimpulse.com/img/ajax_loader.gif"/>
<div ng-transclude class="loading-content"></div>

其他CSS：

.loading-content {
  display: none;
}

示例用法标记，ng-loading也可以在<table>元素上设置：

<div ng-loading="isLoading"> 
  <table>
     <tr ng-repeat="data in data">
       <td>{{ data.name }}</td>
       <td>{{ data.position }}</td>
       <td>{{ data.office }}</td>
     </tr>       
  </table> 
</div>

示例用法脚本：

$scope.isLoading = true; 
$scope.data = null;

$http({ 
  method: 'GET',
  url: 'https://api.myjson.com/bins/4dq3j'
}).then(function successCallback(response) {
  $scope.data = response.data;
  $scope.isLoading=false;
})

演示 - ＆gt;的 http://plnkr.co/edit/DiXnlmqLtj5cYQvDVQRw?p=preview

AngularJS - 一个很好的装载机想法，但无法弄清楚如何做到这一点

1 个答案: