3

DRYの概念を維持しようとしているときにAngularJSに問題があります[繰り返さないでください]。私は何か間違ったことをしていて、誰かが私のエラーを指摘できることを願っています。

ある会社がトラックや車を販売しています。どちらのアイテムにも、類似したプロパティと異なるプロパティがあります。一方の在庫に追加するときに必要なものもあれば、そうでないものもあるので、トラックと車の2つのフォームを作成する必要があるようです。OK、問題ありません。しかし、ここが私が混乱しているところです。

トラックと車の両方にトランスミッションと呼ばれるプロパティがあるので、トランスミッションタイプを追加するための「テンプレート」を作成し、「トラックの追加」および「車の追加」フォームに埋め込みを含めることをお勧めします。 ng-includeを使用していますが、テンプレート自体はメインフォームの範囲内にないため、ng-modelを修飾する必要があります。

トランスミッションテンプレートの入力でこれを使用する場合：ng-model = "newTruck.Tramission "、新しいトラックを追加するフォームはスコープ内にあり、正常に機能しますが、このテンプレートも共有したい車のフォームではないことは明らかです。 。そこで、これを使用することを考えました：ng-model = "$ parent.Transmission"なので、テンプレートはどちらの形式でも使用できますが、これは機能しません。

これに対する影響は、不必要な肥大化したWebサイト、つまりStockNumberテンプレート、Interior、ExteriorColorsテンプレートなどを引き起こす可能性があります。

それで、私はDRYに違反する必要があり、そのような特性を持つすべての異なる製品に対して「送信の追加」テンプレートのような同一のテンプレートを使用する必要があるということは正しいですか、それとも私は何か間違ったことをしていますか？

編集：私が自分自身を明確にしなかった場合、トランスミッションは車とトラックに関連するクラスであり、原始的なプロパティではありません。

4

2 に答える 2

3

これは、ng-initAngularjs に組み込まれていると思われる種類のシナリオです。あなたが言及したことから、2 種類のオブジェクトがあると仮定しますが、それらのオブジェクトの一部は同じになります (ミックスインのようなもの)。

したがって、呼び出されるクラスと呼び出されるクラスを持つことになりますCarがTruck、これらには両方とも呼び出されるオブジェクトが含まれており、transmissionこれはユーザーがその内部で編集するものですng-include。内部で同じ伝送オブジェクトを編集しng-include、コントローラーを親オブジェクトに依存しないtransmissionようにするには、コントラクトを定義しますか?

<div ng-controller="CarCtrl">
    <div>{{car.name}}</div>
    <div ng-include="'transmission.html'" >
    </div>
</div>



<div ng-controller="TruckCtrl">
    <div>{{truck.name}}</div>
    <div ng-include="'transmission.html'">
    </div>
</div>

これはあなたのtransmission.html意志がどのように見えるかです：

<div class="transmission" ng-controller="TransmissionCtrl">
<!-- you want to be able to do model.transmission.type in here and be agnostic of whether model is car or truck-->
    {{model.transmission.type}}
</div>

今、ng-init魔法が来ます。

ng-init="model = car"と同じレベルで追加するだけで、準備完了ng-includeです。

<div ng-controller="CarCtrl">
    <div>{{car.name}}</div>
    <div ng-init="model = car" ng-include="'transmission.html'" >
    </div>
</div>

これTransmissionCtrlで、送信が編集されているモデルにとらわれなくなりました。ドライ？

于 2013-03-15T09:47:17.820 に答える
0

ビューとコントローラーは「車」や「トラック」ではなく、より一般的な「乗り物」を使用する必要があります。各車両タイプの可能な値を構成オブジェクトに保存し、必要に応じてそれらを参照します。

車両タイプ属性を持つことで違いを処理します。

<div ng-show="vehicle.type == 'car'">   {{config.carTransmissionTypes}} </div>
<div ng-show="vehicle.type == 'truck'"> {{config.truckTransmissionTypes}} </div>
于 2014-04-26T07:36:46.273 に答える