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

我昨天做了我的應用程序的快速扣球，這是它如何可以輕鬆完成。 這使用ui.bootstrap模式對話框。

當你有一個長時間運行的進程，如遠程服務調用，你通過$ emit「引發」一個事件。這會鼓起你最外面的範圍。下面是一個來自typehead的搜索功能的示例，我尖銳地反對它。

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

對於這個出現在你要重寫一些風格

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

完整的模板

保持在英里nd，這只是一個尖峯，我花了大約30分鐘來連接。要獲得更強大的解決方案，如果您正在執行多個呼叫以刪除服務，則需要能夠跟蹤已啓​​動和已完成的進程數量等。