1

angular.dart を試していますが、遅いことがわかりました。angular を含む HTML ページが読み込まれると、最初に angular ディレクティブが表示され、次に適切に変換されます。それは即座に変換されるべきではなく、ユーザーは angular を使用しているかどうかを確認するべきではありませんか?

<!DOCTYPE html>
<html ng-app>
<head>
    <title>Hello, World!</title>
</head>
<body>

  <h3>Hello {{name}}!</h3>
  name: <input type="text" ng-model="name">

  <script type="application/dart" src="main.dart"></script>
  <script type="text/javascript" src="packages/browser/dart.js"></script>
</body>
</html>
4

2 に答える 2

3

{{name}} を class="ng-cloak" を持つタグで囲みます。span タグを使用しました。css rule .ng-cloak{ display:none; を指定して隠しておきます。}。angular が読み込まれると、span タグから class="ng-cloak" が削除され、すべてが期待どおりに機能します。

<!DOCTYPE html>
<html ng-app>
<head>
    <title>Hello, World!</title>
    <style>
      .ng-cloak{ display:none;}
    </style>
</head>
<body>
  <h3>Hello <span class="ng-cloak">{{name}}</span>!</h3> 
  name: <input type="text" ng-model="name">  

  <script type="application/dart" src="main.dart"></script>
</body>
</html>
于 2013-12-14T02:40:36.393 に答える
0

別の方法ng-bindとして、次の YouTube ビデオで説明されているように使用することもできます: AngularJS MTV Meetup: Best Practices (2012/12/11) (約 12 分後)

NgBindDirective クラスの API doc から引用

通常、ngBind を直接使用することはありませんが、代わりに {{ expression }} のようなダブル カーリー マークアップを使用します。これは似ていますが冗長ではありません。

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

このようにして、空のページや進行状況アイコンを表示する代わりに、Angular の準備ができたときに置き換えられるデフォルトのコンテンツを表示できます。

于 2013-12-21T17:36:49.973 に答える