0

ここでAngular newb、考えていただければ幸いです...

入力時にウィンドウのタイトルを制御する入力フィールドが必要だとします。モデル バインドがあり、コントローラーが関連付けられていないフィールドは、意図したとおりにキーを押すと動作します。ただし、もう少しロジックが必要です。ユーザー入力の前のデフォルト値であり、入力が空白の場合にも使用されます。

囲んでいる要素にバインドされたコントローラーを追加すると、そのロジックのための場所が提供されますが、キー押下時の変更動作はなくなります。手またはUIで再現できると確信していますが、コントローラーがなくても本質的に存在するため、単純なクリーンな方法が欠けているのではないかと思います。

シンプルなバージョン、キーを押すと動作しますが、スマートはありません:

<title ng-bind-template="{{windowTitle}}">Default Title (not seen)</title>
<input ng-model="windowTitle" type="text">

head (タイトル用) とそれを含む div (入力用) にコントローラー バインディングを配置し、コントローラー関数内にデフォルトの $scope.windowTitle を設定すると、そのデフォルト値が使用されますが、自動更新が中断されます。

実生活では実際のモデルが必要になることはわかっていますが、私が本当に理解しようとしているのは、angular が機能しているように見えるこれら 2 つの方法です。2 つの異なる暗黙的な入力バインディングの動作を具体的に説明しているものは見つかりませんでしたが、まだすべてのドキュメントを読んでいません。

これはどう考えればいいのでしょうか？

編集:私が興味を持っているのは、ウィンドウのタイトルやデフォルト値そのものではありません。私はこれを理解しようとしています:

  • フィールドまたはタイトルにコントローラーがない場合、フィールドに入力すると、キーを押すとすぐにウィンドウのタイトルが変更されます。タイトルはフィールド値に直接リンクされており、他の角度のある接続はありません。
  • タイトルとフィールドの周りにコントローラー バインディングがあるため、フィールドに入力してもタイトルには影響しません。

私が気付いたのは（私が思うに）、ng-controllerバインディングがコントローラーの新しいインスタンスを毎回作成することです。前に示していなかった動作しないコードは次のとおりです。

<title ng-controller="TitleCtrl" ng-bind-template="{{windowTitle || 'Foo'}}">Foo</title>
...
<label ng-controller="TitleCtrl">
    <input ng-model="windowTitle" type="text">
    {{windowTitle}}
</label>

フィールドへのモデル バインディングによって設定された値は、そのコントローラーのインスタンス内で正しく表示され、以前と同様にキーを押すと更新されます。ただし、これら 2 つのコントローラー インスタンスは別個であるため、タイトルへのバインドは機能しますが、タイトルが指すデータはフィールドにバインドされません。

そうじゃない？コントローラーなしで動作する理由は、値がグローバルになるためです。そのため、タイトル バインディングはフィールド バインディングによって設定された値を認識します。

では、他の領域からデータを参照する標準的な方法は何ですか? サービスを作成しますか?

これは基本的なAngularのものであり、ここから始めたばかりであることに気づきました。ありがとう!

編集 2 振り返ってみると、私が書いたにもかかわらず、この質問全体を真剣に軽視するようになりました。

これは、Angular アプリケーション モデルの理解が早すぎることに基づいています。私は公式のチュートリアルの一部しか進めていませんでしたが、大きくはないが完全に自明ではない既存のアプリからすべての js を削除し、そのコンテキストで Angular ができることを調査することに飛びつきました。

ほんの少しのコードで動作するいくつかの機能と、シンプルで明確なマークアップを手に入れることができ、非常に手っ取り早くお金を稼ぐことができました。しかし、私はAngularの考え方を内面化することを本当に短絡していました。この質問のように、ページのさまざまな部分を相互に調整する必要があるとき、私の迅速で汚いノーアーキテクチャアプローチは崩壊しました。

チュートリアルやその他の学習に戻る間、そのプロジェクトは延期しました。この質問を削除する必要があると他の人が考えている場合は、投票を追加します。あるいは、あるレベルでは有用かもしれませんが、無知ではあります。

4

1 に答える 1

0

明示的なコントローラーとモデルを使用せずに、必要な動作を実現する方法は複数あります。

<title ng-bind-template="{{windowTitle && windowTitle || 'default'}}"></title>

または、より簡単な方法で:

<title>{{windowTitle && windowTitle || 'default' }}</title>

どちらの場合も、条件式を使用しています。

(condition) && (answer if true) || (answer if false)

ただし、テンプレートからロジックを削除するように努める必要があります。

于 2012-12-01T13:38:03.250 に答える