Как отложить угловую анимацию до привязки модели

Question

Я работаю над проектом angularJS, и я оживляю между переходами состояния. Я использовал угловую вики в качестве руководства, в том числе это 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); 
}); 

Одна вещь, которую я пытался в моем состояния объекта, заключается в использовании решимости пойти и получить данные, а затем вернуть обещание, но результат тот же. Вот эта попытка:

.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; 
        }] 
      } 

Снова данные возвращаются в порядке, это происходит только после анимации. Я думал, что это будет работать, потому что в вики он говорит: «Каждый из объектов в решимости ниже должен быть решен (через deferred.resolve(), если они обещание) до того, как контроллер конкретизируется.» https://github.com/angular-ui/ui-router/wiki#resolve

редактировать После нескольких исследований я думаю, что ajax завершается до анимации, но привязка модели происходит после. Я считаю, что это текущая последовательность событий.

1. Нажмите переход состояния линии
2. Resolve пожары, получение данных от сервера
3. Получить шаблон государства назначения в
4. Анимируют новый шаблон в положение ([Ui-просмотр] -Enter болтовня)
5. Привяжите новый шаблон к модели.

редактировать Это было проблемой CSS, минимальные высоты на сОн родительского стола была установлены на 1px, это вызвало TBODY не показывать, пока анимация не была закончена.

Answer 1

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

Анимации произойдет после того, как данные решены.

Answer 2

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

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

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