2016-06-17 21 views
2

ng-ifはロード時にページ上のリンクを表示して消えることがあります。ng-ifリンクが1秒間表示されてから消えます。表示を防ぐ方法

リンクはまったく表示されているとは限りません。また、ng-if文がまだ処理されていないと仮定しています。

リンクや要素がまったく表示されないようにする方法はありますか?

また、currentClassオブジェクトがまだロードされていないので、ng-ifが評価できないと推測していますが、ng-ifが解決できるまでデフォルトで非表示にしようとしています。

<span ng-if="isFaculty && !currentClass.courseInformation.IsCustomCourse"> 
<a ng-href="{{$window.BasePath}}lms/class/{{$stateParams.classid}}/instructorguide/download"> 
<span class="cec-msword-icon"></span>Download Instructor Guide</a> 
<span>| </span> 
</span> 
+2

ng-cloak(https://docs.angularjs.org/api/ng/directive/ngCloak)をご覧ください。 –

答えて

7

ng-cloakを使用してください。それはそのようになります:

CSS:

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { 
    display: none !important; 
} 

HTML:あなたのケースでは

<div ng-cloak> ... </div> 

が、それは次のようになります。

<span ng-cloak ng-if="isFaculty && !currentClass.courseInformation.IsCustomCourse"> 
<a ng-href="{{$window.BasePath}}lms/class/{{$stateParams.classid}}/instructorguide/download"> 
<span class="cec-msword-icon"></span>Download Instructor Guide</a> 
<span>| </span> 
</span> 

を忘れないでください:

ディレクティブを要素に適用できますが、ブラウザビューのプログレッシブレンダリングを許可するために、ページの小さな部分に複数のngCloakディレクティブを適用することをお勧めします。

0

私は 、同じようなことが私に起こっていた私は、最終的には基本的にするときということです何が起こるか

explanation

、それは角度がモジュールNG-アニメーションで提供という特徴であることがわかりましたng-ifステートメントは、要素を削除するのではなく消える必要があると判断した場合、angleは最初にng-leaveクラスを要素に追加してから数分後に要素を削除します。あなたのDOMからbeeingが削除されました。

私はCSSセレクタを追加することによってこの問題を解決:

.ng-leave { 
     display: none; 
     } 

を要素には、すぐにそれを削除したクラスを取得し、このように。

0

DOMオブジェクトにはまだリンク要素が含まれていて、ページロード後にCSS呼び出しを非表示にするためにng-ifが含まれているため、リンクが表示されているように見えます.Ng-Cloak CSSクラスは、ロードされたページのDOMが変更されるまで

関連する問題