ngView Анимация Ввод не обжига при загрузке первой страницы

Question

Я немного искал очень тонкую ошибку на своем веб-сайте в течение нескольких дней, но не мог найти для нее никаких решений (возможно, моих знаний в AngularJs недостаточно)

Я использую последние угловые (v1.6.1), ngRoute и ngAnimate.

Дело в том, что анимация ngView не запускается, когда вы переходите на сайт (когда сайт загружается в первый раз).

Вот мой код:

var app = angular.module('app', ['ngAnimate', 'ngRoute']); 

app.animation('.view', function() { 
    return { 
    enter : function (element, done) { 
     alert('enter'); 
     done(); 
    }, 
    leave : function (element, done) { 
     alert('leave'); 
     done(); 
    } 
    } 
}); 

//Config 

app.config(function ($routeProvider, $locationProvider, $httpProvider){ 

    $routeProvider.when('/test.php',{ 
    template : function() { 
     return "<div>Welcome to test page</div>"; 
    } 
    }); 
    $routeProvider.when('/test.php/:path',{ 
    template : function() { 
     return "<div>Inside page</div>"; 
    } 
    }); 

    $locationProvider.html5Mode({enabled: true, requireBase: true}); 
}); 

Я видел этот вопрос на GitHub: https://github.com/angular/angular.js/issues/10536

Это говорит о том, что "это функция, а не ошибка". Но дело в том, что на веб-сайте производства иногда срабатывает, а иногда нет (особенно в сафари и мобильных браузерах).

Например, когда я делаю нагрузки шаблон медленнее:

$routeProvider.when('/test.php',{ 
    template : function() { 
     return "<div>Welcome to test page</div>"; 
    }, 
    resolve: { 
     message: function ($timeout, $q) { 
     console.log('asdasa') 
     return $q(function(resolve){ 
      $timeout(function() { 
      resolve('message'); 
      },1000); 
     }); 
     } 
    } 
    }); 
    $routeProvider.when('/test.php/:path',{ 
    template : function() { 
     return "<div>Inside page</div>"; 
    }, 
    resolve: { 
     message: function ($timeout, $q) { 
     return $q(function(resolve){ 
      $timeout(function() { 
      resolve('message'); 
      },1000); 
     }); 
     } 
    } 
    }); 

Или с PHP:

sleep(1) 

ВВЕСТИ пожаров событий, но, может быть, когда он находится в кэше или когда браузер получает это быстро, это не так.

Есть несколько хаков на github, но я не большой поклонник быстрых хаков из-за их надежности.

Например, это грязный хак, упомянутые на GitHub не работает больше:

$rootElement.data("$$ngAnimateState").running = false; 

Я также попытался:

app.run(function($animate) { 
    $animate.enabled(true); 
}); 

Но это очень странное поведение и в сафари Безразлично» t помочь.

Вот такой JSBIN EXAMPLE

Спасибо заранее, и я буду ждать вашей помощи!

Answer 1

Таким образом, после нескольких дней обсуждения на github, мы нашли решение:

На первом мы должны включить анимацию app.run (которая по умолчанию отключена). Тогда, в зависимости от нашего случая, мы должны отключить анимацию на теле и включить ее непосредственно в представлении. Но до тех пор, пока мы не можем включить анимацию в элементе [ng-view], потому что мы не можем получить вновь созданный узел до того, как $ animate сделает, мы должны обернуть элемент [ng-view] в div контейнера.

HTML:

<div id="view-container"> 
    <div class="view" ng-view></div> 
</div> 

JS:

app.run(function($animate) { 
    $animate.enabled(true); 
    $animate.enabled(document.body, false); 
    $animate.enabled(document.getElementById('view-container'), true); 
}); 

Но этого недостаточно, так как document.hidden угловые проверки и в то время как это верно, $ анимация не работает.Таким образом, мы должны переопределить угловую функцию, так что $ анимация всегда работает (хотя это может быть немного опасно для анимации гладкости):

app.value('$$isDocumentHidden', function() { return false; }); 

Вот оно! Надеюсь, кто-нибудь посчитает это полезным!