AngularJS - 애니메이션 콜백/시퀀스

Question

저는 Angular로 자신 만의 길을 찾고 있습니다. 더 중요한 것은 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

(I 구문에 대해 궁금 누군가를 위해 타이프 라이터를 사용하고) 나는 어제 내 애플 리케이션에 대한 빠른 스파이크를했고, 이것은 쉽게 할 수있는 방법이다. ui.bootstrap 모달 대화 상자를 사용합니다.

원격 서비스 호출과 같이 오래 실행되는 프로세스를 사용하면 $ emit을 통해 이벤트를 "발생"시킵니다. 이것은 가장 바깥 쪽 범위까지 버블 링됩니다. 다음은 내가 추천 한 선입견 검색 기능의 샘플입니다.

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); 
        }); 
      } 
     }; 

그러면 가장 가까운보기의 컨트롤러 인 ng-view를 호스팅하는 "셸"컨트롤러가 있습니다. 여기

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

당신은 어떤 스타일을 오버라이드 (override) 할 필요가 나타날 것입니다

<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 분이 걸리는 스파이크 일뿐입니다. 보다 강력한 솔루션을 위해서는 서비스 제거를 위해 여러 통화를 실행하는 경우 시작 및 완료 된 프로세스 수를 추적 할 수 있어야합니다.