在我的一个部分中,我这样做:
<!-- 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 $$)。而且每次调用“进入”动画都没问题。但是被破坏的 DOM 元素并不是在调用“离开”。
如果我没有做错任何事情,那么我应该要求一种更好的方法来做到这一点 - 也就是说,如何使用新参数为重新加载的视图设置动画......
谢谢!
========== 更新 ========== 这是一个 JSFiddle。没有从上面的代码中借用很多东西,但我很确定这一点。http://jsfiddle.net/morgs32/xPxkX/1