2017-01-10 10 views
2

私のウェブサイトでは非常に微妙なバグが数日間は苦労していますが、解決策が見つかりませんでした(AngularJsの知識が足りません)ngView Animation最初のページの読み込みで起動しない

最新の角度(v1.6.1)、ngRoute、ngAnimateを使用しています。

事がngViewアニメーションを使用すると、Webサイトにアクセスしたときに発射されていない入力することである(ときウェブサイトのロード1回目)。

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にはいくつかのハックがありますが、その信頼性のために簡単なハッキングのファンではありません。

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

私も試してみました:githubの上で言及したこの汚いハックが、それ以上は動作しません。例えば

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

しかし、それは非常に奇妙な行動を持っており、サファリでそれはdoesnの助けてください。ここで

は、事前にJSBIN EXAMPLE

おかげで、私はあなたの助けを待っていることでしょう!

答えて

0

ので、github上の議論の数日後、我々は解決策が見つかりました:私たちは(デフォルトでは無効になっています)app.run上のアニメーションを有効にする必要があります最初は

を。次に、私たちの場合に応じて、ボディ上のアニメーションを無効にし、ビュー上で直接アニメーションを有効にする必要があります。しかし、[ng-view]要素でアニメーションを有効にできない限り、$ animateの前に新しく作成されたノードを保持できないため、[ng-view]要素をコンテナdivにラップする必要があります。

HTML:

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

JS:角度のチェックがdocument.hiddenとして

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

は、しかし、これは、十分ではありません、それが真の間、$アニメーションが動作しません。$アニメーションが常に動作するようにだから我々は(それがアニメーションの滑らかさのために少し危険かもしれませんが)、角度の関数をオーバーライドする必要があります。

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

を、それだそれ!誰かがそれが役に立つと思うことを願っています!

関連する問題