Note that there are some explanatory texts on larger screens.

plurals
  1. POng-animate on an ng-if does an "enter" but not a "leave" when stateparams change
    primarykey
    data
    text
    <p>In one of my partials, I do this:</p> <pre><code>&lt;!-- Lesson Details --&gt; &lt;div class="panel" id="change_subject" ng-if="$state.includes('dashboard.create.lessons')" ng-animate="{enter: 'basic-animation-enter', leave: 'basic-animation-leave'}"&gt; &lt;div class="panel_header"&gt; &lt;div class="panel_title"&gt; &lt;h5&gt; Lesson Details &lt;/h5&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>The $state.includes is straight out of the angular-ui router example. I am using angular ui, of course.</p> <p>Here is my appState function:</p> <pre><code>state('dashboard.create.lessons.detail', { // parent: 'lessons', url: '/{lessonId}', views: { 'details@dashboard.create': { templateUrl: "/app/partials/create.detail.html", controller: ['$scope', '$stateParams', 'curriculumHash', function(scope, stateParams, curriculumHash){ curriculumHash.sstHash().then(function() { scope.selectedContent = findInList(scope.sstArray, stateParams.lessonId); scope.original = angular.copy(scope.selectedContent); }); }], } } }) </code></pre> <p>Pretty ordinary.</p> <p>When the partial is reloaded for each new stateParam, the ng-if creates a new DOM element (with a new Hash $$). And every time it calls the "enter" animation no problem. But the DOM element getting destroyed is not calling the "leave".</p> <p>If I'm not doing anything wrong, then I should be asking for just a better way of doing this - that is, how to animate a view on reload with new parameters...</p> <p>Thanks!</p> <p>========== UPDATE ========== Here is a JSFiddle. Doesn't borrow a lot from the code above, but makes the point I'm pretty sure. <a href="http://jsfiddle.net/morgs32/xPxkX/1" rel="nofollow">http://jsfiddle.net/morgs32/xPxkX/1</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload