ng-Ummantelung funktioniert nicht beim Laden der Seite

Ich bin neu in AngularJS und versuche das Problem zu beheben, wo ein Teil des HTML-Codes angezeigt wird, bevor ng-if-Bedingung ausgewertet wird. Ich hänge ng-Umhang wie in vielen anderen Stack-over-Flow-URLs erwähnt, aber es funktioniert immer noch nicht für mich. Ich versuche, Standardbild zu laden, wenn tatsächliches Bild auf URL leer ist und wenn Seite lädt, selbst wenn tatsächliche URL dort ist, blinkt es zuerst mit Standardbild und lädt dann tatsächliches Bild, weil ng-Umhang nicht richtig arbeitet.ng-Ummantelung funktioniert nicht beim Laden der Seite

Bitte helfen.

Ich habe unten Code und CSS usw.

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>

Quelle

2015-11-20 ree

könnten Sie so etwas wie verwenden, um zu vermeiden ngIf –

@ItaloAyres verwenden, Vielen Dank für die Beantwortung, aber ich brauche mehrere Bedingungen zu verwenden, wie wenn image.small nicht da ist als Scheck für image.large und wenn das nicht da ist, laden Sie das Standardbild. Nicht sicher, wie mache ich das unter Verwendung dieser Bedingung, die Sie gezeigt haben, also versuchte ich, ng-if dafür zu verwenden. – ree

Verwenden von || Zuweisung ist es ein JS-Ausdruck, der den ersten Nicht-Null-Wert zurückgibt. Sie können es mit einer beliebigen Anzahl von Variablen wie folgt verwenden: X = a || b || c und X würde die erste mit einem Nicht-Null-Wert erhalten. –

Sie ng-cloak in Ihrem body Tag anwenden können. Also wird Ihr ganzer Körper erst nach der Zusammenstellung des Winkels angezeigt.

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

Dies wird Ihr Problem lösen.

Quelle

2015-11-20 03:52:35

Vielen Dank für Ihre Antwort auf @Abhilash P A, aber das funktioniert nicht so gut. Nachdem ich ng-cloat in body-Tags angewendet habe, sollen hier einige Informationen zu diesem Thema angezeigt werden, wenn ich das Developer Tool auf chrome überprüfe? Ich sehe nur im Entwicklerwerkzeug, selbst nachdem du ng-cover hinzugefügt hast, wie du es in Beispiel gezeigt hast. Eine weitere Frage ist, muss ich diesen ng-Umhang als Modul ähnlich wie wir Controller oder Service hinzufügen? – ree

@ree, Nein, Es gibt kein Modul für 'ng-cloak'. Es ist nur eine Klasse mit der Eigenschaft 'display: none' und nach dem Kompilieren entfernt der Compiler von angle diese Klasse aus dem Element. –

Also funktioniert das immer noch nicht für mich. Was sollte ich jetzt tun. Bitte helfen Sie. Genau das habe ich jetzt in meinem Code. – ree

Ich habe es immer auf meinem <html> Tag. Wie <html ng-app="someApp" ng-cloak>

Quelle

2015-11-20 06:03:34

ist die beste Lösung, einen Lader zu haben, während Ihre App auf die Daten wartet. Anstatt das ng-if auf das flackernde Element zu setzen, setze die Elternkomponente ein und zeige einen Loader an (es könnte sein, dass FB eine Art Mock von deiner UI macht).

Quelle

2016-05-12 23:53:54 Ruben

-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>

Quelle

2016-06-22 07:06:09

Können Sie Ihrer Antwort weitere Details hinzufügen? Erleichtert es OP, zu wissen, was er in seinem Code falsch gemacht hat :) – Jer

Während dieses Code-Snippet die Frage lösen kann [einschließlich einer Erklärung] (https://meta.stackexchange.com/questions/114762/explaining-entirely Code-basierte Antworten) hilft wirklich, die Qualität Ihres Posts zu verbessern. Denken Sie daran, dass Sie die Frage für Leser in der Zukunft beantworten, und diese Leute könnten die Gründe für Ihren Codevorschlag nicht kennen. Bitte versuchen Sie auch nicht, Ihren Code mit erklärenden Kommentaren zu füllen, dies reduziert die Lesbarkeit sowohl des Codes als auch der Erklärungen! –

ng-Ummantelung funktioniert nicht beim Laden der Seite

Antwort

Verwandte Themen