AngularJS 和 DRY

Question

我在尝试维护 DRY 概念时遇到了 AngularJS 的问题 [不要重复自己]。我希望我做错了什么，有人可以指出我的错误。

一家公司销售卡车和汽车。 这两个项目具有相似和不同的属性。添加到其中一种的库存时需要一些表单，而另一种则不需要，因此看来我必须创建两种表单，一种用于卡车和汽车。好吧，没问题。但这是我感到困惑的地方。

卡车和汽车都有一个称为传输的属性，因此我更愿意创建一个"template"来添加传输类型，并通过 ng-include 将其嵌入“添加卡车”和“添加汽车”表单中。但因为我使用的是 ng-include，模板本身不在主表单的范围内，我需要限定它的 ng-model。

如果我在传输模板的输入中使用它:ng-model="newTruck.Tramission"，添加新卡车的表单将其包含在范围内并且工作正常，但显然不是汽车我也想分享这个模板。所以我想使用这个: ng-model="$parent.Transmission" 这样模板就可以由任何一种形式使用，但这不起作用。

这可能会导致不必要的臃肿网站，即 StockNumber 模板、内部、外部颜色模板等......

那么，我需要违反 DRY 并为每个具有此类属性的不同产品使用相同的模板(例如“添加传输”模板)，这是否正确，还是我做错了什么？

编辑:如果我没有说清楚的话，传输是汽车和卡车的关联类，而不是原始属性。

Answer 1

我认为 ng-init 内置于 Angularjs 中，就是针对这种情况。根据您提到的内容，我将假设您有两种对象，但这些对象的部分内容将是相同的(类似于 mixin)。

因此，您将有一个名为 Car 的类和一个名为 Truck 的类，但这两个类都包含一个名为 transmission 的对象，该对象是用户将在 ng-include 中编辑的内容。为了在 ng-include 中编辑相同的传输对象并使 Controller 不知道 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 不知道它正在编辑其传输的模型。干燥？