angularjs評価の前に表示するデフォルト値を設定する

Question

私は、既存のサイトで本当にシンプルな機能のためにangularJsを使用しました。

それは私がページの中央に角度プラグインとすべてが角度の負荷は非常に遅く、ユーザーが見ることができるという事実を除いて正常に動作しているこの

<div ng-app> 
    <div ng-controller="TermsController"> 
     <input type="checkbox" ng-model="terms.agree" /> 
     <input type="submit" value="{{terms.label}}" .. /> 
    </div> 
</div> 

のようなものである{{terms.label}}のための角度がその値を評価する前の瞬間。

私は

<input type="submit" value="Default value" ng-model="terms.label" .. /> 

ような何かをしようとしたが、それは、送信ボタンの値を更新したことがありません。とにかく私はこのようなものを見たことがあるだろうと思うかもしれませんが、おそらく入力フィールドに値属性がなく、モデルのみがあったかもしれません。

angularJsを読み込む前にテンプレートを設定する方法についてのガイダンスがあります。

私はいくつかのプリローダーを設定し、角度がロードされたらそれを置き換えることができることを知っていますが、この単純なタスクでは過度のことです。あなたがロード中にng-cloak属性を持つ要素を非表示にすることができますヘルプ

Answer 1

あなたはAngularJSの既存のバージョンで何ができるか最善をしています私たちはng-bindディレクティブを使用します。そのドキュメントから：それは一時的にその生の状態でブラウザに表示され テンプレートへのバインディングを配置するのが望ましいですときngBindの使用が結合{{ 表現}}を超える好まれたシナリオ一度

です Angularがコンパイルする前にngBindは要素属性であるため、 は、ページのロード中にバインディングをユーザーに表示させません。

あなたがそうのようなbuttonタグにinputタグを変更する必要がありますあなたのケースでng-bind動作させるために：ここで

<div ng-controller="TermsController"> 
    <input type="checkbox" ng-model="terms.agree"> 
    <button type="submit" ng-bind="terms.label">Before</button> 
</div> 

が働いjsFiddleです：http://jsfiddle.net/TL33r/2/あなたが使用することができ

をng-cloak（詳細はanother questionを参照してください）、ng-cloakはDOM要素（およびその子要素）全体を非表示にしますが、 "デフォルト"の値を変更するように求めていると思いますAngularJSが起動するときの拘束。

Answer 2

ため

感謝：

<div ng-app> 
    <div ng-controller="TermsController" ng-cloak> 
     <input type="checkbox" ng-model="terms.agree" /> 
     <input type="submit" value="{{terms.label}}" .. /> 
    </div> 
</div> 

参考：http://docs.angularjs.org/api/ng.directive:ngCloak