Я использую angular 1.6.5 для своего приложения angular и столкнулся с очень странным поведением.
Я хочу добиться следующего: при изменении ngroute я должен удалить активный класс из текущего представления, дождаться завершения анимации выхода, а затем добавить активный класс в новое представление.
Я настроил приложение и роуты в конфиге.
var app = angular.module('app', ['ngAnimate', 'ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl:"home.html",
reloadOnSearch:false
})
.when('/about-us', {
templateUrl:"about.html",
reloadOnSearch:false
})
.when('/contact', {
templateUrl:"contact.html",
reloadOnSearch:false
})
.otherwise({
template : "<h1>None</h1><p>Nothing has been selected</p>"
});
});
У меня есть служба, в которой я храню время анимации и логическое значение, указывающее видимость представления:
app.service('animationProperties', function () {
this.animationTimings = {
views: 1000
};
this.visibility = {
view : false
};
});
У меня есть один главный контроллер с простой функцией отладки и одна функция onRouteChangeStart, которая должна удалить активный класс из текущего представления (сделав видимость представления логическим значением false):
app.controller('MainCtrl', function ($scope, $window, $location,
animationProperties) {
$scope.animationProperties = animationProperties;
$scope.$on('$routeChangeStart',function () {
animationProperties.visibility.view = false;
});
$scope.toggleActive = function(){
$scope.animationProperties.visibility.view = !$scope.animationProperties.visibility.view;
}
});
И последнее, ngAnimate ожидает завершения анимации выхода, затем удаляет текущее представление (с помощью метода done ()) и снова входит в новое представление, делая логическое значение видимости истинным:
app.animation('.view', function($timeout, animationProperties) {
return {
enter: function(element, done) {
$timeout(function () {
animationProperties.visibility.view = true;
$timeout(function () {
done();
}, animationProperties.animationTimings.views);//Wait to enter
},animationProperties.animationTimings.views); //Wait for leave function
},
leave: function(element, done) {
$timeout(function () {
done();
}, animationProperties.animationTimings.views);
}
}
});
Вот плункер.
При первом переключении страниц (из навигации) вы увидите, что все работает нормально, но при переходе на страницы второй раз класс просмотра не обновляется, поэтому анимация не воспроизводится. Во время отладки вы можете ясно видеть, что логическое значение видимости обновляется правильно, но ng-class при выходе из представления не обновляется.
Ваша помощь будет очень признательна !!!
