AngularJS - обратный вызов/последовательность анимации

Question

Я просто нахожу свой путь с Угловым и, что еще важнее, пытается найти свой путь без jQuery!

Хотелось бы иметь представление, показывающее загрузчик, когда данные извлекаются с сервера, и когда он поступит (модель будет иметь свойство «Население»). Я хочу, чтобы счетчик исчезал, и содержимое, которое должно исчезнуть.

Я использую директиву для бит загрузки, а ng-show кажется достаточно простым, чтобы переключать разделы в представлении.

Вид:

<div ng-hide="model.Populated" loading-spinner></div> 
<div ng-show="model.Populated"><!-- Content goes here --> </div> 

Директива:

module App.Directives { 
declare var Spinner: any; 
export class LoadingSpinner { 
    constructor() { 
     var directive: ng.IDirective = {}; 
     directive.restrict = 'A'; 
     directive.scope = { loading: '=myLoadingSpinner'}, 
     directive.template = '<div class="loading-spinner-container"></div>'; 
     directive.link = function (scope, element, attrs) { 
      var spinner = new Spinner().spin(); 
      var loadingContainer = element.find('.loading-spinner-container')[0]; 
      loadingContainer.appendChild(spinner.el); 
     }; 
     return directive; 
    } 
} 

Это анимация, я не уверен. В частности, я хочу, чтобы контент исчезал, как только счетчик полностью исчез, и я не уверен, как это сделать с обратным вызовом.

Должен ли я попробовать всю анимацию с помощью CSS или расширить мою директиву и использовать javascript?

(я использую Машинопись для тех, кто интересно о синтаксисе)

Answer 1

Я сделал быстрый скачок для моего приложения вчера, и это то, как это можно легко сделать. Здесь используется модальный диалог ui.bootstrap.

Когда у вас есть длительный процесс, например, удаленный вызов службы, вы «поднимаете» событие через $ emit. Это приведет к увеличению вашего внешнего охвата. Вот пример из функциональности поиска typeahead, с которой я столкнулся.

function autoCompleteClientName(searchValue, searchType) { 

      var self = this; 

      self.$emit("WorkStarted", "Loading Clients..."); 

      //return promise; 
      if (searchType === 'name') { 
       return $scope.clientSearchDataService.getClientsByName(searchValue) 
        .then(function (response) { 

         self.$emit("WorkCompleted", ""); 
         return response.results; 
        }, function(error) { 
         self.$emit("WorkCompleted", ""); 
         console.warn("Error: " + error); 
        }); 
      } else if (searchType === 'number') { 
       return $scope.clientSearchDataService.getClientsByNumber(searchValue) 
        .then(function (response) { 
         self.$emit("WorkCompleted", "");; 
         return response.results; 
        }, function (error) { 
         self.$emit("WorkCompleted", ""); 
         console.warn("Error: " + error); 
        }); 
      } 
     }; 

Тогда у нас есть «оболочка» контроллер, который является контроллером для внешней точки зрения, один, который принимает нг-вид.

(function() { 
    'use strict'; 

    // Controller name is handy for logging 
    var controllerId = 'shellCtrl'; 

    // Define the controller on the module. 
    // Inject the dependencies. 
    // Point to the controller definition function. 
    angular.module('app').controller(controllerId, 
     ['$scope', '$modal', shellCtrl]); 

    function shellCtrl($scope,$modal) { 
     // Bindable properties and functions are placed on vm. 
     $scope.title = 'shellCtrl'; 


     $scope.$on("WorkStarted", function(event, message) { 

      $scope.modalInstance = $modal.open({ templateUrl: "app/common/busyModal/busyModal.html" }); 
     }); 

     $scope.$on("WorkCompleted", function (event, message) { 
      $scope.modalInstance.close(); 

     }); 



    } 
})(); 

Вот шаблон модальный

<div class="modal-dialog"> 
    <div class="modal-content"> 
     <img src="/images/loading.gif"width="55" height="55"/> 
     <h3>Loading data...</h3> 
    </div> 
<!-- /.modal-content --> 
</div><!-- /.modal-dialog --> 

Для этого, чтобы появиться, вы должны переопределить некоторые стили

<style> 
     .modal 
     { 
      display: block; 
     } 

     .modal-body:before, 
     .modal-body:after 
     { 
      display: table; 
      content: " "; 
     } 

     .modal-header:before, 
     .modal-header:after 
     { 
      display: table; 
      content: " "; 
     } 
    </style> 

и если вам нужен полный шаблон для модального

<div class="modal-dialog"> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <h4 class="modal-title">Modal title</h4> 
    </div> 
    <div class="modal-body"> 
     ... 
    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
    </div> 
    </div><!-- /.modal-content --> 
</div><!-- /.modal-dialog --> 

Хранить в ми и что это всего лишь шип, который потребовал около 30 минут для соединения. Для более надежного решения вам необходимо иметь возможность отслеживать количество запущенных и завершенных процессов и т. Д., Если вы выполняете несколько вызовов для удаления службы.