使用通用组件设计一个angularjs项目，该项目包含2个应用程序，而该组件又使用使用通用组件中的代码的应用程序特定组件

Question

我们有应用A和应用B以及共享组件C.

A和B都包括C.

C是带有字段和按钮的表单。当按下其中一个按钮时，我们弹出一个名为object-modal的组件。

C中不存在object-modal，A和B必须实现此组件。

关闭/保存模态时，应调用位于共享组件服务中的公共代码。

这感觉太乱了，设计这个有更聪明的方法吗？

这是一个吸虫： https://plnkr.co/edit/Dm5ykOyB8XbLOOXTQ84U?p=preview

var C = angular.module('C', []);

C.component('common', {
  template:"<app-specific>{{$ctrl.text}}</app-specific>",
  controller:function($scope) {
    this.text = "Test";
  }
});
C.service("cService", function(){
  this.methodInC = function(){
    alert("back in C");
  }
})


var appA = angular.module('A', ["C"]);

appA.component('appSpecific', {
  template:"<input type='button' ng-click='$ctrl.click()' value='{{$ctrl.text}}'></input>",
  controller:function($scope, cService) {
    this.text = "Test A";
    this.click = function(){
      cService.methodInC();
    }
  }
}); 


var appB = angular.module('B', ["C"]);

appB.component('appSpecific', {
  template:"<button ng-click='$ctrl.click()'>{{$ctrl.text}}</button>",
  controller:function($scope, cService) {
    this.text = "Test B";
    this.click = function(){
      cService.methodInC();
    }
  }
}); 

angular.element(document).ready(function() {
  angular.bootstrap(document.getElementById("appA"), ['A']);
  angular.bootstrap(document.getElementById("appB"), ['B']);
});