I have an issue with AngularJS while trying to maintain the concept of DRY [Don't repeat yourself]. I hope I am doing something wrong and someone can point out my error.
A company sells trucks and cars. Both items have similar and dissimilar properties. Some are required when adding to inventory for one, while not the other, so it appears I will have to create two forms, one for truck and car. OK, not a problem. But here is where I am confused.
Both truck and car have a property called transmission, so I would much prefer to create a 'template" to add a transmission type, and thru ng-include embed it in the "Add Truck" and "Add Car" form. But because I am using ng-include, the template by itself is not in scope with the main form and I need to qualify it's ng-model.
If I use this in the transmission template's input : ng-model="newTruck.Tramission", the form to add a new truck has it in scope and works fine, but obviously not the car form which I would like to also share this template. So I thought to use this: ng-model="$parent.Transmission" so the template can be used by either form, but this does not work.
The implications for this can cause an unnecessary bloated website, ie StockNumber template, Interior, Exterior Colors template, etc... .
So, am I correct that I will need to violate DRY and have identical templates like the "Add Transmission" template for every dissimilar product that has such a property, or am I doing something wrong?
Edit: If I had not made myself clear, transmission is an associated class for car and truck and not a primitive property.
This is the kind of scenario for which , I assume, ng-init is built into Angularjs. From what you mentioned I am going to assume that you are there are two kinds of objects, but parts of those objects are going to be same (kind of a mixin).
So, you are going to have a class called Car and a class called Truck but both these contain an object called transmission which is what the user will be editing inside that ng-include. In order to be editing the same transmission object inside the ng-include and making the controller agnostic of the parent object of transmission how about you define a contract?
<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>
Now this is how your transmission.html will look like :
<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>
Now comes the ng-init magic.
Just add ng-init="model = car" at the same level as ng-include and you are good to go.
<div ng-controller="CarCtrl">
<div>{{car.name}}</div>
<div ng-init="model = car" ng-include="'transmission.html'" >
</div>
</div>
So now your TransmissionCtrl is agnostic of the model whose transmission it is editing. DRY?
The view and controller should not use 'Car' or 'Truck', but more generic 'vehicle'. Store the possible values for each vehicle type in configuration objects, and reference those when needed.
Handle the differences by having vehicle type attribute.
<div ng-show="vehicle.type == 'car'"> {{config.carTransmissionTypes}} </div>
<div ng-show="vehicle.type == 'truck'"> {{config.truckTransmissionTypes}} </div>