时间戳

首页 > 解决方案 > AngularJS：加载动画时间

angularjs - AngularJS：加载动画时间

问题描述

我们的团队正在 ServiceNow 中开发一个小部件，并希望在我们的提交按钮中显示一个加载符号。我们已经让它显示出来了，但是加载符号在表格加载后会持续几秒钟，我们不知道为什么。这是我们的小部件当前的样子：

<form class="large-margin-bottom col-xs-offset-3 col-xs-6">
  <div class="form-group">
   <label for="Name Text">${Full Name}:</label>
   <input class="input-lg form-control" type="text" ng-model= "c.data.fullName" placeholder="Enter Employee Name" >
  </div>

  <button type="submit" ng-click="c.send_fullName();"class="btn btn-primary btn-lg btn-block">
    <i ng-if="c.data.loading" class="fa fa-spinner fa-spin m-r-sm"></i>${Search}
  </button>
</form>


 <div ng-if= "data.showTable == 'hi' && !c.data.loading">  
  <table class="table table-striped table-bordered">
  <caption>List of actions for this Employee</caption>
  <thead class="thead-light">
    <tr>
      <th scope="col">Employee Name</th>
      <th scope="col">Occupation</th>
      <th scope="col">Location</th>
      <th scope="col">Start Date</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in data.json">
      <td>{{item.name_employee_full}}</td>
      <td>{{item.occ}}</td>
      <td>{{item.loc}}</td>
      <td>{{item.start}}</td>
    </tr>
  </tbody>
</table>

我们的客户端控制器如下所示：

function($scope, $location) {
    /* widget controller */
    var c = this;

    //Name send to server
    c.send_fullName = function() {
        c.data.loading = true;
        c.data.action = "addName";
        c.data.loading = false;
        c.server.update().then(function(){
            c.data.action = undefined;
            c.data.fullName= '';
        })
    }
}

我们的服务器脚本如下所示：

(function() {

data.fullName= '';
data.showTable = '';
data.json = [];

    if (input){
        data.fullName = input.fullName;
        var subject_person = fetchHR(data.fullName);
        data.json = getEmployeeData(data.fullName);


        if (input.action == 'addName'){
            data.showTable = "hi" ;
        }
    }
})();

标签： angularjsloadingservicenow

解决方案

我已经成功地将它与输入和 server.update() 结合使用：

HTML

<div class="loader" ng-show="loadingIndicator">
  <div class="spinner-border" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

客户端脚本

//loading spinner icon
$scope.loadingIndicator = $rootScope.loadingIndicator;
$scope.$on('sp_loading_indicator', function(e, value) {
    $scope.loadingIndicator = value;
});

CSS

.loader {
display: flex;
justify-content: center;
margin: 50px 0;
}
.spinner-border{
//from bootstrap 4.4:
display: inline-block;
width: 3rem;
height: 3rem;
vertical-align: text-bottom;
border: .25em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
-webkit-animation: spinner-border .75s linear infinite;
animation: spinner-border .75s linear infinite;
color: #cccccc;
}
@keyframes spinner-border{
100% {-webkit-transform: rotate(360deg);
transform: rotate(360deg); }
}

推荐阅读