Question

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

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

卡车和汽车都有一个叫做变速器的属性，所以我更喜欢创建一个“模板”来添加传输类型，并且通过包含它来嵌入“添加卡车”和“添加汽车”表格。但是因为我使用的是ng-include，所以模板本身不在主窗体的范围内，我需要对它的ng-model进行限定。

如果我在传输模板的输入中使用它： ng-model =“newTruck.Tramission ”，添加新卡车的表格在范围内并且工作正常，但显然不是车表格，我也想分享这个模板。所以我想用这个： ng-model =“$ parent.Transmission”所以模板可以被任何一种形式使用，但这不起作用。

对此的影响可能导致不必要的膨胀网站，即StockNumber模板，内部，外部颜色模板等......

所以，我是否正确我需要违反DRY并为每个具有此类属性的不同产品设置相同的模板，如“添加传输”模板，或者我做错了什么？

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

Answer 1

这种情况，我认为，ng-init内置于Angularjs中。从你提到的我将假设你有两种对象，但这些对象的一部分将是相同的（一种混合）。

因此，您将拥有一个名为Car的类和一个名为Truck的类，但这两个类都包含一个名为transmission的对象，用户将在其中编辑ng-include {1}}。为了在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与它正在编辑的传输模型无关。干？

Answer 2

视图和控制器不应使用'Car'或'Truck'，而应使用更通用的'vehicle'。将每种车辆类型的可能值存储在配置对象中，并在需要时引用它们。

通过拥有车辆类型属性来处理差异。

<div ng-show="vehicle.type == 'car'">   {{config.carTransmissionTypes}} </div>
<div ng-show="vehicle.type == 'truck'"> {{config.truckTransmissionTypes}} </div>

AngularJS和DRY

2 个答案: