$ timeoutと$ compileを使用したng-showの角の初期遷移

$compileを使用してDOMにHTMLを添付するサービスがあります。このHTMLには、表示と非表示の切り替えがあるng-showが含まれており、偽の状態から開始します。問題は、DOMにアタッチされているときに、非表示遷移が表示されることです。どうすればそれを避けることができますか？私はコントローラが$timeoutの中でこのサービスを呼び出していることに気がつきました。

https://plnkr.co/edit/og0wrp6rZ65StXbufqLI?p=preview

angular 
 
    .module('app', ['ngAnimate']) 
 
    .directive('compileNgShowAnimation', ($timeout, $compile) => ({ 
 
    restrict: 'E', 
 
    link: (scope, element) => { 
 
     $timeout(() => { 
 
     angular 
 
      .element(element) 
 
      .append($compile(` 
 
      <div> 
 
       Show: 
 
       <input type="checkbox" ng-model="checked" aria-label="Toggle ngShow"> 
 
       <br /> 
 
       <div 
 
       class="check-element animate-show-hide" 
 
       ng-show="checked"> 
 
       I should show up only when the checkbox is checked. 
 
       </div> 
 
      </div> 
 
      `)(scope)) 
 
     }) 
 
    } 
 
    }))

.animate-show-hide.ng-hide { 
 
    /*transform: translate3d(0,-100%, 0);*/ 
 
    opacity: 0; 
 
} 
 

 
.animate-show-hide:not(.ng-hide) { 
 
    /*transform: translate3d(0,0, 0);*/ 
 
    opacity: 1; 
 
} 
 

 
.animate-show-hide.ng-hide-add, 
 
.animate-show-hide.ng-hide-remove { 
 
    transition: all linear 0.5s; 
 
} 
 

 
.check-element { 
 
    border: 1px solid black; 
 
    padding: 10px; 
 
} 
 

 
/* 
 
Copyright 2017 Google Inc. All Rights Reserved. 
 
Use of this source code is governed by an MIT-style license that 
 
can be found in the LICENSE file at http://angular.io/license 
 
*/

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script> 
 
<body ng-app="app"> 
 

 
    <compile-ng-show-animation></compile-ng-show-animation> 
 
    
 
</body>

出典

2017-08-03 Ian Luca

簡単な可視性を得ますか？ページをロードすると、チェックボックスを表示する必要がありますか？ scope.checked = trueを設定するだけであれば、それは表示され、falseアニメーションが再生されません –

あなたはいくつかの時間の後にクラスを適用するためにフラグを使用することができ、このような何か：

angular 
    .module('app', ['ngAnimate']) 
    .directive('compileNgShowAnimation', ($rootScope, $compile, $document, $timeout) => ({ 
    restrict: 'E', 
    link: (scope, element) => { 
     $timeout(() => { 
     scope.checked = false; 
     scope.animate = false; 

     angular 
      .element(element) 
      .append($compile(` 
      <div> 
       Show: 
       <input type="checkbox" ng-model="checked" aria-label="Toggle ngShow"> 
       <br /> 
       <div class="check-element {{animate ? 'animate-show-hide':''}}" ng-show="checked"> 
       I should show up only when the checkbox is checked. 
       </div> 
      </div> 
      `)(scope)) 
     }); 
     $timeout(() => { 

     scope.animate = true; 
     },10); 
    } 
    }))

出典

2017-08-03 14:42:21

非常に賢い、ページのレンダリングとページのレンダリングの問題を解決しました。 –

オプションは、そのことを確認することです

ng-hideクラスをdiv：

に追加すると、この要素はデフォルトで非表示になります210

<div class="check-element animate-show-hide ng-hide" ng-show="checked"> 
    I should show up only when the checkbox is checked. 
</div>

次に、あなたは文句を言わないあなたが達成したいん何

https://plnkr.co/edit/Ik3BflLHwu3DXglOMOhX?p=preview

出典

2017-08-03 14:45:32

これは私にとって問題を解決しませんでした。私は 'ng-cloak'を使用していると思います。 –

あなたは何を意味するのかわかりません。ページをレンダリングするときにdivを表示したくない場合は、この問題を解決しますか？それはありませんか？ :-) –

私が提供した例では、そのページがレンダリングされたときに、私のサービスでは、ページがレンダリングされた後に少しだけ要素が追加されます –

$ timeoutと$ compileを使用したng-showの角の初期遷移

答えて

関連する問題