AngularJS: загрузка времени анимации - PullRequest
Новая
       68

AngularJS: загрузка времени анимации

0 голосов
/ 14 апреля 2020

Наша команда разрабатывает виджет в 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" ;
        }
    }
})();

1 Ответ

0 голосов
/ 15 апреля 2020

Я успешно использовал это вместе с input и 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); }
}
...