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？

(对于任何想知道语法的人，我都在使用TypeScript )

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

然后我们有一个"shell“控制器，它是最外层视图的控制器，托管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 -->

请记住，这只是一个峰值，我花了大约30分钟才连接在一起。对于更健壮的解决方案，如果要执行多个调用来删除服务，则需要能够跟踪启动和完成的进程数等。