AngularJS 1.5 two components in one

Question

I have two components very similar, but with diff data. I want to make just one, but because I don't know components very well I have no ideea how.

Please someone give me an idea.

1st

<validate-imei-device 
  deviceData="summaryOffer.device" 
  on-validation="validateImei(input)"
  permissions="contractAccessMap"
  form-name="summaryForm">
</validate-imei-device>

2nd

<validate-imei-accessory 
  deviceData="accessory" 
  on-validation="validateImei(input)"
  permissions="contractAccessMap"
  form-name="summaryForm">
</validate-imei-accessory>

Controller for 1st

(function() {
"use strict";
angular.module('APP')
    .component("validateImeiDevice", {
        templateUrl: 'components/validate-imei-device/validate-imei-device.html',
        controller: validateImeiCtrl,
        bindings: {
            deviceData: '<',                
            permissions: '<',
            formName: '<',
            onValidate: '&'
        }
    });

    function validateImeiCtrl() {
        var ctrl = this;
        console.log('data', ctrl.deviceData);
        ctrl.data = {};
        ctrl.status = {};
        ctrl.actions = {};

        ctrl.actions.validateInput = validateInput;

        function validateInput(input){
            ctrl.onValidate({input: input});
        }
    }
})();

For 2nd controller is almost the same with diff name and partial. If someone needs to see the html partials too, I will put them. They are very similar, but they received diff data.

Form for 1st

<md-input-container class="md-block" ng-show="$ctrl.data.colorInfoList != null && $ctrl.data.colorInfoList[0].stock.hasSerial">
  <label>Cod IMEI</label>
  <input md-maxlength="20" minlength="5" required name="imei" 
         ng-class="{'serial-valid' : $ctrl.data.colorInfoList[0].stock.serialStatus=='valid' ,'serial-invalid' : $ctrl.data.colorInfoList[0].stock.serialStatus=='invalid'}"
         ng-disabled="$ctrl.data.colorInfoList[0].stock.serialStatus == 'loading' || !$ctrl.permissions.edit || readyToPay"
         ng-model="$ctrl.data.colorInfoList[0].stock.serial" 
         ng-change="$ctrl.actions.validateInput($ctrl.data)"/>
  <div ng-messages="$ctrl.formName.imei.$error" ng-show="$ctrl.formName.imei.$dirty">
    <div ng-message="required">Campul este obligatoriu</div>
    <div ng-message="md-maxlength">Codul este prea lung</div>
    <div ng-message="minlength">Codul este prea scurt</div>
    <div ng-if="summaryOffer.device.colorInfoList[0].stock.serial">
      <div ng-show="$ctrl.data.colorInfoList[0].stock.serialStatus=='valid'" style="color: green">Cod valid</div>
      <div ng-show="$ctrl.data.colorInfoList[0].stock.serialStatus=='invalid'">Cod invalid</div>
      <div ng-show="$ctrl.data.colorInfoList[0].stock.serialStatus=='loading'">In curs de validare ...</div>
    </div>
  </div>
</md-input-container>

Form for 2nd

<md-input-container class="md-block" ng-show="$ctrl.data.colorInfoList != null && $ctrl.data.colorInfoList[0].stock.hasSerial">
  <label>Cod IMEI</label>
  <input md-maxlength="20" minlength="5" required name="imei{{$index}}" 
         ng-class="{'serial-valid' : $ctrl.data.colorInfoList[0].stock.serialStatus=='valid' ,'serial-invalid' : $ctrl.data.colorInfoList[0].stock.serialStatus=='invalid'}"
         ng-disabled="$ctrl.data.colorInfoList[0].stock.serialStatus == 'loading' || !$ctrl.permissions.edit || readyToPay"
         ng-model="$ctrl.data.colorInfoList[0].stock.serial" 
         ng-change="$ctrl.actions.validateInput($ctrl.data)"/>
  <div ng-messages="$ctrl.formName['imei' + $index].$error" ng-show="$ctrl.formName.imei{{$index}}.$dirty">
    <div ng-message="required">Campul este obligatoriu</div>
    <div ng-message="md-maxlength">Codul este prea lung</div>
    <div ng-message="minlength">Codul este prea scurt</div>
    <div ng-if="$ctrl.data.colorInfoList[0].stock.serial">
      <div ng-show="$ctrl.data.colorInfoList[0].stock.serialStatus=='valid'" style="color: green">Cod valid</div>
      <div ng-show="$ctrl.data.colorInfoList[0].stock.serialStatus=='invalid'">Cod invalid</div>
      <div ng-show="$ctrl.data.colorInfoList[0].stock.serialStatus=='loading'">In curs de validare ...</div>
    </div>
  </div>
</md-input-container>

The question doesn't contain enough information. Please, always show all the relevant code. If these are only template urls that differ, you can use [templateUrl function](http://stackoverflow.com/a/33846452/3731501). — Estus Flask, Jan 06 '17 at 14:18
I put all code, I mean the forms too. As u can see they are almost very similar. — , Jan 06 '17 at 14:28

score 1 · Accepted Answer · edited May 23 '17 at 11:53

1

Considering that component mode is defined statically and not dynamically, templateUrl function can be used for components with identical controllers but different templates:

.component("validateImei", {
    templateUrl: ['$attrs', function($attrs) {
        var type = $attrs.validateImeiType;
        if (type !== 'device' && type !== 'accessory')
            throw new Error('Bad type');

        return 'components/validate-imei-device/validate-imei-' + type + '.html';
    }],
    controller: validateImeiCtrl,
    bindings: {
        deviceData: '<',                
        permissions: '<',
        formName: '<',
        onValidate: '&'
    }
});

And the component is used like

<validate-imei validate-imei-type="device" ...>

edited May 23 '17 at 11:53

Community

1
1

answered Jan 06 '17 at 14:47

Estus Flask

206,104
70
425
565

looks good, but what about `deviceData="summaryOffer.device" ` that is different then the second component, `deviceData="accessory" ` ? – Jan 06 '17 at 15:03
That's what bindings are for. Both `summaryOffer.device` and `accessory` are abstracted as `deviceData`. I see no problems with it. Notice that `deviceData` attribute won't work. It should be `device-data`. – Estus Flask Jan 06 '17 at 15:16
yes u r right, I put it here wrong, but on my code is corect. – Jan 06 '17 at 15:26

AngularJS 1.5 two components in one

1 Answers1