AngularJS 1.5兩個組件在一個

Question

我有兩個組件非常相似，但與差異數據。我只想做一個，但因爲我不太瞭解組件，所以我沒有想法如何。

請有人給我一個想法。

第一

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

第二

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

控制器，用於第一

(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}); 
     } 
    } 
})(); 

對於第二控制器是幾乎與差異名稱和部分相同。 如果有人需要看到HTML偏分量，我會把它們。他們非常相似，但他們收到了差異數據。

爲第一形態

<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>

表格第二

<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>

Answer 1

考慮到組分模式被定義ST atically和不動態， templateUrl function可用於以相同的控制器，但不同的模板組件：

.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: '&' 
    } 
}); 

和組分被用於像

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