Applicare una classe stato a ui-view per consentire animazioni ng diverse

Question

È necessario applicare diverse animazioni a seconda dello stato corrente utilizzando ui-view. Sulla scia this question..

Ho il seguente codice (edit: vedi plunker preview)

<section ui-view ng-class="stateClass"></section> 

stateClass viene applicato in ogni controller per esempio:

.controller('loginController', function($scope, $state) { 
    // Set state class name 
    $scope.stateClass = 'slide-left'; 
    console.log($scope); 

Questo funziona e la classe viene aggiunto fine - ma l'animazione non entrerà in funzione.

Se dovessi aggiornare il codice ui-view a:

con la classe hardcoded, questo funziona (ma ora non posso applicare animazioni diverse).

ng-class aggiunto dopo ng-enter? Qualcuno può suggerire come realizzare le animazioni?

modifica >> Stranamente le animazioni ng-leave funzionano correttamente. Ma css ancora non si applica ai ng-enter

Answer 1

Aggiungi alla tua ui-view seguente direttiva state-class:

.directive('stateClass', ['$state', function($state) { 
    return { 
     link: function($scope, $element, $attrs) { 
      var stateName = $state.current.name || 'init', 
       normalizedStateName = 'state-' + stateName.replace(/\./g, '-'); 
      $element.addClass(normalizedStateName); 
     } 
    } 
}]); 

On ng-enter, per appena creato elemento si aggiunge il nome dello stato corrente (lo stato del ui-view rende la transizione a). Per l'elemento che sta per scomparire lo stato rimane uguale a quello che è stato creato prima.

Ad esempio:

Il passaggio da main a modal stato:

Fase 1: Lo stato main è attivo:

<ui-view state-class class="state-main ng-scope"></ui-view> 

Fase 2: Eseguire $state.go('modal');

<ui-view state-class class="state-modal ng-animate ng-enter ng-enter-active"></ui-view> 
<ui-view state-class class="state-main ng-animate ng-leave ng-leave-active"></ui-view> 

Fase 3: lo stato modal è attivo

<ui-view state-class class="state-modal"></ui-view>