web-dev-qa-db-ja.com

AngularJSが初期化される前に要素の表示を防ぐ方法（ng-show）

AngularJSでは、ng-showが有効になる前にページに表示される要素を防ぐ方法がありますか、ng-cloakについての記事がいくつかありますが、私の場合はうまくいかないようです、おそらくng-cloakは二重中括弧を防ぐためです要素スタイルではなく。

誰かが話すもう1つの方法は、AngularJSを初期化する前に何らかのスタイルを定義することですが、それはやや管理が困難です。

これを処理する公式の方法はありますか？

angularjsng-show
16
Kuan

ローダーを表示したくない場合は、ng-cloakが解決策になります。

ng-cloakの公式ドキュメント

それでも問題が解決しない場合は、cssを追加して、html内でng-cloakを使用して要素を非表示にして、ブラウザーが間に合うようにしてください。

その場合、ng-cloakを追加する方法を選択してください。たとえば、クラスとして追加します。

<div ng-show="condition" class="ng-cloak">...</div>

そして、これをhtmlヘッドタグに追加します。

<style> .ng-cloak { display: none !important; } </style>
24
Yoann

表示準備が整うまで（一部のデータはバックエンドからロードされている可能性があります）何も表示しないようにする場合は、ng-ifを使用することをお勧めします。もちろん、ng-showでも同じように機能します。ただし、ng-ifを使用する利点は、表示する必要があるまで追加のDOMの作成を遅らせ、その結果、最初のページの読み込み時間を改善できることです。

以下に例を示します。

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


   
myApp.controller("myController", function ($scope, $timeout) {

    $scope.isLoading = false;
    $scope.data = null;
    
    simAsync();

    //simulate async task like http request
    function simAsync() {
        //loadind data has started
        $scope.isLoading = true;

        $timeout(function () {
            $scope.data = [{
                "firstname": "Sims",
                    "lastname": "Wilkerson"
            }, {
                "firstname": "Kelli",
                    "lastname": "Vazquez"
            }, {
                "firstname": "Mcdonald",
                    "lastname": "Byrd"
            }, {
                "firstname": "Taylor",
                    "lastname": "Frost"
            }, {
                "firstname": "Merle",
                    "lastname": "Adkins"
            }, {
                "firstname": "Garrett",
                    "lastname": "Hood"
            }];
            //the data has loaded
            $scope.isLoading = false;
        }, 1500);
    }

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
    
</div>
5
Christos Baziotis

問題を完全に回避する2つの選択肢：

<span ng-bind="expression_without_braces"></span>

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

  • ui-router を使用して、HTMLを個別のファイルに保持します。このファイルは、必要な場合とコントローラーが初期化された場合にのみロード/解析/注入されます。

hello world tutorial は、別のHTMLファイルを使用するように変更されています。

// helloworld.js
var myApp = angular.module('helloworld', ['ui.router']);

myApp.config(function($stateProvider) {
  var helloState = {
    name: 'hello',
    url: '/hello',
    templateUrl: 'helloworld.html'
  }

  $stateProvider.state(helloState);
});

<!-- helloworld.html -->
<h3>hello world!</h3>

<!-- index.html -->
<html>
  <head>
    <script src="lib/angular.js"></script>
    <script src="lib/angular-ui-router.js"></script>
    <script src="helloworld.js"></script>
  </head>

  <body ng-app="helloworld">
    <a ui-sref="hello" ui-sref-active="active">Hello</a>

    <ui-view></ui-view>
  </body>
</html>
1
DJDaveMark

次のようなローダーを使用します。

[〜＃〜] js [〜＃〜]

 angular.element(document).ready(function(){
      $('.loading').remove(); // Just an example dont modify the dom outside of a directive in a real app!
      alert('Loaded!'); 
    });

[〜＃〜] css [〜＃〜]

.loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  color: #000;
}

[〜＃〜] demo [〜＃〜]

http://codepen.io/nicholasabrams/pen/MwOMNR

私はちょうどここで同様のトピックに答えました： Angularjsタブレンダリング中のスピナーの読み込み

1
Alpha G33k