Question

我想在我的Ionic App中为问题报告构建一个全局模式。在我的应用程序的几个页面中，我有一个＆＃34;报告问题＆＃34;应该打开包含表单的模式的按钮。

每个页面（带有问题描述的表单）的模式完全相同，但是我希望有时将附加数据传递给它。 IE：

我在＆＃34; itemA＆＃34;查看，我点击＆＃34;报告问题＆＃34;按钮，我想附加＆＃34; itemA.id＆＃34;问题。
我在主页面上，点击＆＃34;报告问题＆＃34;，它只发送问题说明。

要求：

我正在使用$ionicModal
我不想污染$ rootScope。
我希望尽可能避免代码重复（不在每个控制器中定义模态行为......）。
我不希望将这些额外的问题数据存储到全局变种中。
我想展示另一个成功模式＆＃34;表格提交成功时。

理想情况下，每个控制器中唯一的代码应该是

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

我试过this implementation，但由于这些原因我不满意：

它没有处理＆＃34; $ destroy＆＃34;来自父视图的事件。
每当我调用＆＃34; .show（）＆＃34;时，我都会创建一个新模态，因此我需要在模态关闭或隐藏＆＃34;时将其销毁。

感谢任何给我指示的人！

Answer 1

您所描述的内容可以通过使用角度来完成$ $提供服务来装饰ionModalDirective。

这是一个使用ionActionSheetDirective覆盖模板的示例，但是如果你不想覆盖模板那么也没关系，你可以根据传入的参数覆盖链接函数。这完全取决于你。这里的关键是，无论何时在应用程序中使用ionModal，结果模板，链接函数等都将提供给角度。：

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;

  }]);
}]);

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

1 个答案: