javascript - AngularJS .ng-enter アニメーションが初回実行時に機能しない

Question

AngularJS アプリで奇妙な問題が発生しました。ng-include を使用したタブ スライドの切り替えのアニメーションは、最初は機能しませんが、2 回目または 3 回目では正常に機能します。

plunker での私のテスト コードは次のとおりです。

ng-enter アニメーション クラス、設定前、テンプレート アップロードのように見えます。助けてください。

Answer 1

テンプレートが順不同で読み込まれるため、アニメーションが機能していないようです。タブの実装にディレクティブを使用するか、ngRoute を使用することをお勧めします。

ここで ngRoute の例を作成しました: http://embed.plnkr.co/RFw3CZwQmPz9doqe7o1u/preview

アプリの機能がよくわからないため、初期設定が壊れている可能性があります。しかし、rootScope を多用しているようです。コントローラー間で共有データを保存するためのサービスを使用することをお勧めします。このように (ここの例を使用: Angular JS のコントローラー間でデータを渡す? )

app.service('productService', function() {
  var productList = [];

  addProduct = function(newObj) {
      productList.push(newObj);
  };
  getProducts = function(){
      return productList;
  };
});

更新:この のよう$routeProviderに、で動的な templateUrls を使用することができます。コントローラーでも可能です。そうすれば、ステップごとに個別のルートを指定する必要がなくなります。