AngularJS 1.5两个组件合一

我有两个非常相似的组件，但是有不同的数据。我只想做一个，但因为我不太了解组件，所以我不知道如何制作

请有人给我一个主意

第一

第二

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

（函数（）{
“严格使用”；
角度。模块（'APP'）
.component（“ValidateEIDevice”{
templateUrl:'components/validate imei device/validate imei device.html'，
控制员：验证EIMECTRL，
绑定：{
deviceData:“考虑到组件模式是静态定义的，而不是动态定义的，
可用于具有相同控制器但不同模板的组件：

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

.component（“validateImei”{
templateUrl:['$attrs'，函数（$attrs）{
var type=$attrs.validateImeiType；
如果（类型！=“设备”和类型！=“附件”）
抛出新错误（“错误类型”）；
返回'components/validate-imei-device/validate-imei-'+type+'.html'；
}],
控制员：验证EIMECTRL，
绑定：{
deviceData:“这个问题没有包含足够的信息。请始终显示所有相关代码。如果这些只是不同的模板URL，您可以使用。我放置了所有代码，我的意思是表单。正如您所看到的，它们几乎非常相似。看起来不错，但是
deviceData=“summaryOffer.device”呢
这与第二个组件不同，
deviceData=“附件”
？这就是绑定的用途。
summaryOffer.device
和
附件
都被抽象为
deviceData
。我看不出有什么问题。请注意，
deviceData
属性不起作用。它应该是
设备数据
。是的，我把它放在这里是错误的，但在我的代码上是正确的。
(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});
        }
    }
})();

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