2015-11-20 4 views
6

AngularJSを初めて使用し、ng-if条件が評価される前にHTMLコードの一部が表示される問題を修正しようとしています。私は多くの他のスタックオーバーフローURLで言及されているようにng-cloakをhsingしていますが、それでも私のためには機能しません。 URLの実際のイメージが空白で、ページが読み込まれたときに実際のURLがある場合でも、デフォルトイメージを読み込もうとしています.ng-cloakが正しく動作しないため、デフォルトイメージで最初に点滅し、実際のイメージを読み込みます。ページロード時にng-cloakが動作しない

助けてください。

は、私はあなたがあなたのbodyタグでng-cloakを適用することができますなど

Index.htmlと

<!DOCTYPE> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <base href="/"> 

    <title>Some App</title> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-resource.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"></script> 
    <script src="https://code.angularjs.org/1.4.7/angular-sanitize.min.js"></script> 

    <style type="text/css"> 
     [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { 
     display: none !important; 
    }  
    </style>  
</head> 
<body ng-app="app"> 
some code here 
<div ng-view></div> 
</body> 
</html> 

other.html

<div class="content"> 
    <div style="width: 100px; height: 40px;"> 

     <div ng-if="image.small"> 
      <img src="{image.small}}"> 
     </div> 
     <div ng-if="!image.small" ng-cloak> 
      <img src="image/default.png"> 
     </div> 
</div> 
+0

あなたは答えてくれてありがとう、ngIf –

+0

@ItaloAyresを使用しないようにのようなものを使用することができますが、image.smallがチェックよりも、存在しない場合のように、私は複数の条件を使用する必要がありますimage.largeの場合は、それがデフォルトのイメージを読み込むよりもない場合。あなたが示したこの状態を使ってどうすればいいのか分かりませんので、このためにng-ifを使ってみました。 – ree

+0

||を使用しています代入では、最初の非NULL値を返すJS式です。次のような変数をいくつでも使用できます。X = a || b || c、およびXは、nullでない値を持つ最初のものを受け取ります。 –

答えて

2

コードとCSSの下に持っています。したがって、全身は、角度の編集後にのみ表示されます。

<body ng-cloak ng-app="app"> 
.. 
</body> 

これで問題は解決します。

+0

@Abhilash P Aにお返事ありがとうございますが、これはうまくいきません。 bodyタグにng-cloakを適用した後、chromeのDevelopersツールをチェックすると、これに関連する情報が表示されますか?例で示したようにng-cloakを追加した後でも、開発者ツールではもう1つ質問があります。コントローラーやサービスを追加するのと同じように、このng-cloakをモジュールとしてロードする必要がありますか? – ree

+0

@ree、いいえ、 'ng-cloak'のモジュールはありません。これはプロパティ 'display:none'を持つ単なるクラスであり、コンパイル後コンパイラのコンパイラはこのクラスを要素から削除します。 –

+0

これはまだ私のために働いていません。私は今どうすればいい。助けてください。これは今私のコードで正確に私が持っているものです。 ree

1

私は常に<html>タグにしました。同様に<html ng-app="someApp" ng-cloak>

0

ベストの解決策は、アプリケーションがデータを待っている間にローダーを持たせることです。 ng-ifをちらつき要素に置き換えるのではなく、親コンポーネントに配置してローダーを表示します(FBはUIのモックのようなものです)。

-3

<div ng-if="image.small"> 
     <img src="{image.small}}"> 
    </div> 
    <div ng-if="!image.small" class="ng-cloak"> 
     <img src="image/default.png"> 
    </div> 

+1

答えに詳細を追加できますか?営業担当者が自分のコードで間違っていたことを知ることを容易にします:) – Jer

+0

このコードスニペットは質問を解決するかもしれませんが[説明を含む](https://meta.stackexchange.com/questions/114762/explaining-entirely -code-based-answers)は本当にあなたの投稿の質を向上させるのに役立ちます。将来読者の質問に答えていることを覚えていて、コード提案の理由を知らない人もいるかもしれません。あなたのコードに説明的なコメントを詰め込まないようにしてください。これにより、コードと説明の両方の可読性が低下します! –

関連する問題