2016-09-20 22 views
0

私のアプリでページを表示するのに遅延を追加する必要があります。私はangularjsフレームワークを使用しています。理由は私がこれを行う必要がある理由は、私のDOMが完全にレンダリングされても、angularjsからのデータはまだ読み込まれており、DOMに追加されていないためです。私はui-viewにタイムアウトを追加しようとしましたが、そのトリックはしません。Javascript DOM要素の表示に遅延を追加するにはどうすればよいですか?

+0

がデータを読み込み、何でも完全なコールバックのいくつかの並べ替えを持っていませんか? – nnnnnn

+0

追加情報については、かなり大きなjsonファイルからjsonオブジェクトを読んでいます。何が起きているのですか?jsonオブジェクトに要素の値をバインドする指示があります。 html要素は既にspanなどの値で既にロードされていますが、span要素内の値を表示するのが遅れているjsonファイルからspan内の値がフェッチされています。 – czartm

+0

最良の方法は、解決策をルータに追加することです。そのため、ビューはJSONが読み込まれるまで読み込まれません。 – EvilZebra

答えて

1

すると、タイムアウト機能を使用してみてください:

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope, $timeout) { 
    $scope.myHeader = "Hello World!"; 
    $timeout(function() { 
     $scope.myHeader = "How are you today?"; 
    }, 2000); 
}); 

More Information ...

0

あなたは私はあなたの問題から理解どのようなページの読み込み

を遅らせたい、なぜ私は取得していないページが取得されていることですコンパイルされていない形式で表示される

ng-cloack directive 

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

このディレクティブは<body>要素に適用できますが、ブラウザビューのプログレッシブレンダリングを可能にするために、ページの小さな部分に複数のngCloakディレクティブを適用することをお勧めします。ここ

ビューがロードされる前に、ドキュメント

https://docs.angularjs.org/api/ng/directive/ngCloak

0

があなたのJSONを読み込むためにresolveオプションを使用して完了です。例えばDocumentation.

resolve: { 
    return $http({method: 'GET', url: '/someUrl'}) 
       .then (function (data) { 
        return doSomeStuffFirst(data); 
       }); 
} 
関連する問題