AngularJS 1.5 2つのコンポーネント1つ

Question

私は非常によく似ていますが、diffデータを持っています。私はちょうど1つを作りたいと思うが、私は構成要素をよく知らないので、私はどのように理想がない。

私にアイデアを教えてください。第1

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

ため

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

コントローラ2コントローラのほぼ差分名と部分と同じです。 誰かがhtmlパーシャルも見なければならない場合、私はそれらを配置します。彼らは非常に似ていますが、diffデータを受け取りました。

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

1フォームの

フォーム2

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