3

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

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

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

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

这可能会导致不必要的臃肿网站，即 StockNumber 模板、Interior、Exterior Colors 模板等。

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

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

4

2 回答 2

3

我认为，ng-initAngularjs 中内置了这种场景。根据您提到的内容，我将假设您有两种对象，但这些对象的某些部分将是相同的（一种混合）。

因此，您将有一个名为的类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 回答