5

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

こんな感じです

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

ページの中央にAngularを接続すると、Angularの読み込みが非常に遅く、Angularがその値を評価する前にユーザーが{{terms.label}}をしばらく見ることができるという事実を除いて、すべてが正常に機能しています。

私は次のようなことをしようとしました

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

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

angleJsロードの前にテンプレートをセットアップする方法に関するガイダンスを歓迎します。

プリローダーを設定して、Angularが読み込まれたら交換できることは知っていますが、この単純なタスクではやり過ぎのようです。

手伝ってくれてありがとう

4

2 に答える 2

10

ng-cloakロード中に属性を持つ要素を非表示にすることができます：

<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

于 2012-11-08T16:12:45.630 に答える
8

AngularJSの既存のバージョンでできる最善のことは、ng-bindディレクティブを使用することです。そのドキュメントから：

{{expression}}バインディングよりもngBindの使用が優先されるシナリオは、Angularがコンパイルする前に、ブラウザーによって未加工の状態で一時的に表示されるテンプレートにバインディングを配置することが望ましい場合です。ngBindは要素属性であるため、ページの読み込み中はバインディングがユーザーに表示されなくなります。

ng-bindあなたのケースで機能させるには、タグを次のようなinputタグに変更する必要があります。button

<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（詳細については別の質問を参照）ng-cloak、AngularJSが起動したときにバインディングに変更される「デフォルト」値を要求したと思いますが、DOM要素全体（およびその子）を非表示にします。

于 2012-11-08T18:12:50.710 に答える