Question

我有两个非常相似的组件，但有diff数据。我想做一个，但因为我不太了解组件我不知道如何。

请有人给我一个想法。

第一

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

对于第二个控制器与diff名称和部分控制器几乎相同。如果有人也需要看到html部分，我会把它们放进去。它们非常相似，但是它们收到了差异数据。

第1次表格

＆＃13;

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

＆＃13;

表格第二次

＆＃13;

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

＆＃13;

Answer 1

考虑到组件模式是静态定义的，而不是动态定义的， 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" ...>

AngularJS 1.5两个组件合二为一

1 个答案: