2

私のパーシャルの1つで、私はこれを行います:

<!-- Lesson Details -->
<div class="panel" id="change_subject" ng-if="$state.includes('dashboard.create.lessons')" ng-animate="{enter: 'basic-animation-enter', leave: 'basic-animation-leave'}">
  <div class="panel_header">
    <div class="panel_title">
      <h5>
        Lesson Details
      </h5>
    </div>
  </div>
</div>

$state.includes は angular-ui ルーターの例からそのまま出てきたものです。もちろん、角度のあるUIを使用しています。

ここに私の appState 関数があります:

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

かなり普通。

新しい stateParam ごとにパーシャルがリロードされると、ng-if は新しい DOM 要素を (新しい Hash $$ で) 作成します。そして、「enter」アニメーションを呼び出すたびに問題ありません。しかし、破棄される DOM 要素は「leave」を呼び出していません。

私が何も悪いことをしていないのであれば、これを行うためのより良い方法、つまり、新しいパラメーターを使用してリロード時にビューをアニメーション化する方法を求めるべきです...

ありがとう!

========== UPDATE ========== ここに JSFiddle があります。上記のコードから多くを借りているわけではありませんが、私はかなり確信しています。http://jsfiddle.net/morgs32/xPxkX/1

4

1 に答える 1