66

どういうわけか、AngularJS の ng-cloak が機能しません。ページの読み込み中に {{ }} を非表示にしたい。見た目がひどいので。

<!DOCTYPE html>
<html lang="en" ng-app>
    <head>
        <meta charset="UTF-8">
        <title>Angular Sample</title>
    </head>
    <body ng-model="isShow" ng-init="isShow=true">

        <p ng-show="isShow"><span ng-cloak>{{ isShow }}</span></p>
        <p ng-show="!isShow"><span ng-cloak>{{ isShow }}</span></p>

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    </body>
</html>
4

12 に答える 12

105

ここからこのcssを追加します

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

親divまたはアプリを定義した場所で、クラス名または属性のいずれかを使用します。

例えば：

<div ng-app="Random" class="ng-cloak">
</div>
于 2015-03-30T06:23:25.687 に答える
31

Angular ドキュメントから:

最良の結果を得るには、angular.jsスクリプトを html ドキュメントの head セクションにロードする必要があります。または、上記の css ルールをアプリケーションの外部スタイルシートに含める必要があります。

于 2015-03-30T06:00:35.147 に答える
11

CSS で次のルールを指定する必要があります。

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}
于 2015-03-30T06:00:44.577 に答える
9

ngBind を使用すると、それも解消されます (SharePoint で開発することがありますが、ngCloak は機能しません)。

AngularJS ドキュメント:

Angular がテンプレートをコンパイルする前に、生の状態でテンプレートがブラウザによって一時的に表示される場合は、{{ 式 }} の代わりに ngBind を使用することをお勧めします。ngBind は要素属性であるため、ページの読み込み中にバインディングがユーザーに表示されなくなります。

この問題に対する別の解決策は、ngCloak ディレクティブを使用することです。

JS:

var app = angular.module('test', []);

app.controller('testCtrl', ['$scope', function($scope) {
  $scope.test = "Hello World";
}]);

HTML:

<html ng-app="test">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="testCtrl">
  <h1 ng-bind="test"></h1>
</body>

</html>
于 2015-09-23T21:07:29.870 に答える
8

css ファイルに以下を追加します。

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}
于 2015-03-30T06:00:27.920 に答える
6

私の場合、私の問題は保留中の ajax リクエストによるものだと考えました。Ng-cloak はおそらく静的コンテンツに対して機能しますが、テンプレートが ajax データに依存している場合、これは ajax 応答を受け取る前にレンダリングされます。

それを避けるために、ディレクティブを定義します：

アングー

mymodule
        .directive("ajaxCloak", ['$interval', '$http', function ($interval, $http) {
            return {
                restrict: 'A',
                link: function (scope, element, attrs) {
                    let stop = $interval(() => {
                        if ($http.pendingRequests.length === 0) {
                            $interval.cancel(stop);
                            attrs.$set("ajaxCloak", undefined);
                            element.removeClass("ajax-cloak");
                        }
                    }, 100);

                }
            };
        }]);

少しの CSS で:

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

次に、メインの HTML ファイルで次のようにします。

<div ui-view data-ajax-cloak></div>

注: これはグローバル クロークであるため、ng-cloak ほど洗練されたものではなく、すべてのリクエストが終了するまですべてを非表示にします。

于 2016-07-25T09:48:44.820 に答える
3

angular 1.3 以降では、動作させるために ng-app 属性の名前を指定する必要があります。

<html lang="en" ng-app="myApp">

あなたのJSで：

angular.module("myApp",[])

これにより、角度がブートストラップになります。

ただ、現状ではページ下部でAngularを読み込んでいるため、読み込みに時間がかかっています。そのため、に必要な cssng-cloakはまだ利用できません。

をタグに移動するかjs、特定の CSS コードを CSS にロードして機能させます。

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}
于 2015-03-30T06:00:42.507 に答える
2

上記のすべての回答とそれ以上の回答を試してみましたが、助けはありませんでした。私の（大きな）ページは、読み込みのたびにちらつきます。私の解決策は、ボディタグの直後にこれを追加することでした:

<div style="display:flex" opacity=0>
  <status-progress></status-progress>
  <h3>Loading... </h3>
</div>

ページ内のすべてをラップするには:

<div class="loaded" style="opacity: 0" opacity=1> ... </div>

指令：

app.directive('opacity', opacity);
    function opacity($timeout) {
        return {
            link: function (scope, element, attrs) {
                var value = attrs.opacity;
                $timeout(function () {
                    element[0].style.opacity = value;
                },500);
            }
        }
    }

ページを「より滑らか」に見せるために、スタイルシートは次のことを行います。

.loaded{
    transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
}

このように、すべての準備が整っている間、「読み込み中」が 1 秒間表示されます。

于 2016-06-16T14:13:22.157 に答える
0

ここで推奨されている修正を使用するとうまくいきます...

https://github.com/opitzconsulting/jquery-mobile-angular-adapter/issues/167

CSS:

.my-cloak {
  display: none  !important;
}

JS:

$scope.$on('$viewContentLoaded', function(){
    $('.my-cloak').removeClass('my-cloak');
});

HTML:

div(class="my-cloak")
于 2016-01-14T23:14:31.803 に答える