7

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

助けてください。

以下のコードとCSSなどがあります。

索引.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>
4

6 に答える 6

2

タグで応募できng-cloakますbody。したがって、Angular のコンパイル後にのみ全身が表示されます。

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

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

于 2015-11-20T03:52:35.853 に答える
1

私はいつも自分の<html>タグでそれをしました。お気に入り<html ng-app="someApp" ng-cloak>

于 2015-11-20T06:03:34.440 に答える
0

最善の解決策は、アプリがデータを待っている間にローダーを用意することです。ちらつき要素に ng-if を配置する代わりに、親コンポーネントに配置してローダーを表示します (FB が UI の一種のモックを実行するようになる可能性があります)。

于 2016-05-12T23:53:54.487 に答える
-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>

于 2016-06-22T07:06:09.340 に答える