BinaryDevelop
  1. ホーム
  2. angularjs

[解決済み] AngularJsでng-Cloakディレクティブを実際に使用する方法とは？

2022-02-11 21:05:38

質問

  1. とは何ですか？ ng-cloak ディレクティブを使用できますか？
  2. なぜ使うのですか？

解決方法は？

ng-マント

docsから。

ngCloakディレクティブは、アプリケーションのロード中に、Angular htmlテンプレートが生の（コンパイルされていない）形式でブラウザによって短時間表示されることを防ぐために使用されます。このディレクティブは、htmlテンプレートの表示によって引き起こされる望ましくないフリッカー効果を避けるために使用します。

簡単に言うと ng-cloak ディレクティブを使用すると、コンパイルされていない要素が表示されるのを防ぐことができます。アンコンパイルされた要素とは、入力されたデータを保持し待機する要素になります。 

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

もし myvar コントローラがまだコンパイルされていないか、データが入力されていません。 ng-cloak 防ぐ {{myvar}} を表示しないようにし、変数がコンパイルされたときだけ div を表示するようにします。

このコード例に従って、次のように確認します。 結果 を使用した場合と使用しない場合 ng-cloak : 

<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
                }); 
            });
        }); 
}]);

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します