web-dev-qa-db-ja.com

AngularJsでng-Cloakディレクティブの実際の使用方法は？

  1. ng-cloakディレクティブとは何ですか？
  2. なぜ使用するのですか？
angularjsdirective
30
Anil Singh

ng-cloak

ドキュメントから：

NgCloakディレクティブは、アプリケーションのロード中にブラウザーによってAngular htmlテンプレートが生の（コンパイルされていない）形式で簡単に表示されるのを防ぐために使用されます。このディレクティブを使用して、 htmlテンプレート表示によって。

簡単に言えば、ng-cloakディレクティブを使用して、コンパイルされていない要素が表示されないようにすることができます。コンパイルされていない要素は、着信データを保持および待機する要素になります。

<div ng-cloak>{{myvar}}</div>

myvarコントローラーがまだコンパイルされていない場合、またはデータにng-cloakが入力されていない場合、「{{myvar}}」の表示を防ぎ、変数がコンパイルされたときにのみdivを表示します。

このコード例に従って、ng-cloakの有無にかかわらず results を確認します。

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

<body ng-controller="MyController" ng-cloak>
    <h3>ngCloak Example</h3>
        <ol >
            <li ng-repeat="item in myData">
                {{item.title}}
            </li>
        </ol>
</body>


var myApp= angular.module("myApp",['ngResource']);

myApp.controller("MyController", ["$scope", "$resource","$timeout",
    function($scope,$resource,$timeout){
        $scope.myData =[];

        var youtubeVideoService = $resource("https://gdata.youtube.com/feeds/api/videos?q=googledevelopers&max-results=5&v=2&alt=jsonc&orderby=published");

        youtubeVideoService.get()
            .$promise.then(function(responseData) {

        angular.forEach(responseData.data.items,
            function(aSingleRow){
                console.log(aSingleRow);
                $scope.myData.Push({
                    "title":aSingleRow.title
                }); 
            });
        }); 
}]);
43
Ben Diamant

Ng-cloak Benを使用する理由は有効ですが、Benが提供する例の結果には、{{var}}が表示される場合があります。これは、スクリプトが一般的に非同期にロードされるか、HTMLボディの下部に配置される場合に特に当てはまります。

Benの例では、<style>を一番上に置いていますが、それを使用していません。そのようにng-cloakクラスを<body>に配置し、そのスタイルを使用する必要があります。

<body class="ng-cloak" ng-controller="MyController" ng-cloak> ...

この方法では、bodyタグのコンテンツはAngular ng-cloakをdisplay: blockに変更するか、ディレクティブがタグ付きhtmlを更新するまで表示されません。

クラスを追加する理由は、ng-cloakディレクティブが解析されるためですafter htmlが表示されているため、JSスレッドが停止し、{{something here}}のようなものが表示される可能性が常にあります。

適切な使用の良い例は、class="ng-cloak"およびng-cloakディレクティブをng-repeatディレクティブに含めることです。

ただし、{{}}だけがうっとうしい場合や、JSスレッドがクラッシュした場合でもページに問題がない場合は、タグにng-bindを追加するよりも、{{}}を使用する方が適切です。

11
user2935435

私が付け加えたい一つのメモ-私はほとんどのアプリケーションで見ましたが、ng-cloakを追加するだけでは機能しません。その理由は、そのページが大きくなり、jsがそれまでロードされないためです。

このディレクティブに手動でCSSを適用すると、ここで役立ちます-

[ng-cloak]  
{  
display: none !important;
}

これが誰かの助けになることを願っています！

0
Abhay Dixit