Javascript 如何构建一个可以通过特定选项显示的全局离子模式？

我想在我的Ionic应用程序中为问题报告构建一个全局模式。 在我的应用程序的几个页面中，我有一个报告发布按钮，可以打开一个包含表单的模式

模式对于每个页面表单和问题描述是完全相同的，但是我希望有时向其传递额外的数据。即：

我在itemA视图上，单击报告问题按钮，我想将itemA.id附加到问题。 我在主页上，我点击报告问题，它只发送问题描述。 要求：

我正在使用 我不想污染$rootScope。 我希望尽可能避免代码重复，而不是在每个控制器中定义模态行为。。 我不想将这些额外的问题数据存储到全局变量中。 当表单提交成功时，我想显示另一个成功模式。 理想情况下，每个控制器中的唯一代码应该是

.controller('Ctrl', function($scope, $issueModal){
    $scope.reportIssue = function(){
        $issueModal.show({item_id: 42});
    }
});

我试过了，但我不满意，原因如下：

它不处理父视图中的$destroy事件。 每次调用.show时，我都会创建一个新的模态，因此每当模态关闭或隐藏时，我都需要销毁它。

---

我会感谢任何给我指路的人

您所描述的内容可以通过使用angulars$provide service来装饰ionModalDirective来实现

下面是一个使用ionActionSheetDirective重写模板的示例，但是如果您不想重写模板，那么也可以，您可以根据传入的参数重写link函数。这真的取决于你。这里的关键是，只要您在应用程序中使用ionModal，就会向angular提供生成的模板、链接功能等：

angular.module('ionic').config(['$provide', function ($provide) {
  $provide.decorator('ionActionSheetDirective', ['$delegate', function ($delegate) {
    var directive = $delegate[0];

    // Here we are completely overriding the template definition for the ionActionSheetDirective
    directive.template = '' +
      '<div class="action-sheet-backdrop action-sheet-backdrop-fisdap">' +
      '<div class="action-sheet-wrapper">' +
      '<div class="action-sheet">' +
      '<div class="action-sheet-group action-sheet-group-title" ng-if="titleText">' +
      '<div class="action-sheet-title" ng-bind-html="titleText"></div>' +
      '</div>' +
      '<div class="action-sheet-group action-sheet-group-buttons">' +
      '<button class="button button-outline" ng-click="buttonClicked($index)" ng-repeat="button in buttons" ng-class="button.classes" ng-bind-html="button.text"></button>' +
      '<button class="button button-outline button-assertive destructive" ng-click="destructiveButtonClicked()" ng-bind-html="destructiveText" ng-if="destructiveText"></button>' +
      '<button class="button button-outline button-balanced" ng-click="cancel()" ng-bind-html="cancelText" ng-if="cancelText"></button>' +
      '</div>' +
      '</div>' +
      '</div>' +
      '</div>';

    // Store the old compile function
    var compile = directive.compile;

    // Overwrite the old compile function
    directive.compile = function () {

      // Get the link function from the old directive
      var link = compile.apply(this, arguments);

      // If we wanted to add some elements programatically we'd do it here
      // tElement.append('<div>Added in the decorator</div>');

      // Use the link function from the old directive for this directive
      return function () {
        link.apply(this, arguments);

        // We can extend the link function here if we wanted to
      };
    };

    return $delegate;

  }]);
}]);