如何将角度动画延迟到模型绑定之后

How do I delay angular animation until after model binding

本文关键字：迟到 模型 绑定 之后 延迟 动画      更新时间：2023-09-26

我正在处理angularJS项目，并在状态转换之间设置动画。我用angular wiki作为指南，包括这个plunkr:

http://plnkr.co/edit/NsZhDL?p=preview

我正在设置从一个<table>到下一个状态的<table>的动画。动画（向右滑动）工作正常，但动画在加载数据之前启动。因此，从右侧滑入一行标题，然后将数据加载到<tr>中。在我的控制器中，我有一个ajax调用，它可以调用并获取数据。它显然是在动画火了之后得到的。有没有办法确保在制作动画之前加载数据？

function CategoryList(/*dependencies*/) {
var controller = this;
//setup stuff
//get the data
$http.get('/My/Url', {
    headers: {
        ShowLoading: true
    }
}).success(function (data, status, headers, config) {
    controller.setCategories(data);
});

我在状态对象中尝试过的一件事是，使用resolution去获取数据，然后返回promise，但结果是一样的。这是一个尝试：

.state('myStateName', {
            url: '/myUrl/{id:int}',
            templateUrl: '/mytemplate.html',
            controller: 'ListController',
            controllerAs: 'List',
            resolve: {
                ajaxData: ['$q', '$http', '$stateParams', '$timeout',
                    function ($q, $http, $stateParams, $timeout) {
                        var deferred = $q.defer();
                        // $http returns a promise for the url data
                        $http.get('/Admin/Activities/Category/GetDetail/' + $stateParams.id, {
                            headers: {
                                ShowLoading: false
                            }
                        }).success(function (data) {
                            deferred.resolve(data);
                        }).error(function (data) {
                            deferred.reject();
                        });
                        return deferred.promise;
                    }]
            }

同样，数据恢复得很好，只是发生在动画之后。我认为这会起作用，因为在wiki中，它说"在实例化控制器之前，必须解析下面解析中的每个对象（如果它们是promise，则通过deferred.resolve（））。"https://github.com/angular-ui/ui-router/wiki#resolve

edit经过进一步的研究，我认为ajax在动画之前完成，但模型绑定发生在之后。我相信这就是目前的一系列事件。

  1. 单击状态转换链接
  2. 解决火灾，从服务器获取数据
  3. 获取目标状态的模板
  4. 将新模板动画制作到位（[ui视图]-输入yada yada）
  5. 将新模板绑定到模型

edit这都是一个CSS问题，表的div父级上的最小高度被设置为1px，这导致tbody直到动画完成才显示。

Plunker目前不工作，但这似乎起作用：

    var myapp = angular.module('myapp', ["ui.router", "ngAnimate"]);
    function dummyResolve(data) {
      return function ($timeout, $q) {
        var defer = $q.defer();
        $timeout(function () {
          defer.resolve(data);
        }, 500);
        return defer.promise;
      };
    }
    myapp.config(function ($stateProvider, $urlRouterProvider) {
      $stateProvider
        .state("foo", {
          url: "/foo",
          template: '<h1>{{ data }}</h1>',
          controller: 'FooBarCtrl',
          resolve: {
            data: dummyResolve('foo')
          }
        })
        .state("bar", {
          url: "/bar",
          template: '<h1>{{ data }}</h1>',
          controller: 'FooBarCtrl',
          resolve: {
            data: dummyResolve('bar')
          }
        })
      $urlRouterProvider.otherwise("/foo");
    });
    myapp.controller('FooBarCtrl', function ($scope, data) {
      $scope.data = data;
    });

解析数据后会生成动画。

所以决心一开始让我很困惑，我一辈子都无法让它正常工作。

这是我目前正在进行的项目中使用的代码，此代码有效。。。

var getUserData = ['$q','$http',
  function($q, $http) {
    var deferred = $q.defer();
    // You can run the code that starts your animation here, not sure how it works.
    $http.get('url')
      .success(function(data) {
        // Once it hits here it means you have your data and the resolve will complete allowing the state to change.
        // If you need your animation to run now, you would add it here
        deferred.resolve(data);
      }
      .error(function(data) {
        deferred.reject();
      }
    return deferred.promise;
  }]

希望这能有所帮助，如果你需要澄清，请告诉我

因此，要将解析中的数据提供给目标状态控制器，您所要做的就是将其注入控制器

app.controller('someController', ['$scope', 'resolvedData',
  function($scope, resolvedData) {
    $scope.data = resolvedData // Here is your data
  }]);

有关详细信息，请参阅有关解析的ui.router文档https://github.com/angular-ui/ui-router/wiki

相关文章：