AngularJS：如何在UI-Router中将一个状态设置为全局父级（使用模式作为公共部分）

Question

在$ stateProvider＃state（）中，我对使用UI-Router的Bootrtrap-ui模式进行了如下定义。

var state = {
    name: 'modala',
    parent: 'home',
    onEnter: function($modal, $state) {
        modalInstance = $modal.open({
            templateUrl: 'modala.html',
            controller: 'modalaCtrl',
            controllerAs: 'modal'
        });
        modalInstance.result['finaly'](function() {
            modalInstance = null;
            if ($state.$current.name === 'modala') {
                $state.go('^');
            }
        });
    },
    onExit: function() {
        if (modalInstance) {
            modalInstance.close();
        }
    }
};

我想在除家以外的任何地方使用“ modala”。

我不想创建的很多定义 'modala' 。

有没有一种方法可以接受它，并设置父项的必要条件？

添加说明

没有好的解决方案

1. 不要将父级设置为模态状态。

结果：打开模式窗口时，不显示父级。

模式1示例

1. 模态状态名称为$ {parent.name} .modal格式。

结果：有效。但是，关于一个模态窗口，必须定义许多状态。并且，每当我添加一个调用模态的父母时，都必须添加一个状态。

模式2范例

1. 定义每个父母的模态

结果：与模式2相同。

模式3示例

Answer 1

有更新的插件 （问题中的
第二次尝试
）

我们将在操作中看到的是装饰器的不同用法，如我之前的文章中详细描述的那样

因此，首先，让我们提供几种状态，例如“ home”，“ page1”，“ page2” …，我们希望它们全部引入子状态-
具有模态功能。模态特征在所有子状态中都应该 是相同的 -但它们将属于不同的父项。

为此，我们可以使用如下状态定义：

.config(function($stateProvider) {
  // we just define empty child state for each existing parent
  $stateProvider.state('home.generalModal',  {});
  $stateProvider.state('page1.generalModal', {});
  $stateProvider.state('page2.generalModal', {});
})

如果我们以这种方式劫持装饰器，那就足够了：

.config(['$stateProvider', 
  function($stateProvider) {

    var endsWith = function(stringToBesearched, valueToBeFound) {
      return stringToBesearched.slice(-valueToBeFound.length) === valueToBeFound;
    }

    $stateProvider.decorator('data', function (state, dataBuilder) {
      // this is original, by configuration created parent
      var data = dataBuilder(state);

      // we can define where we do not want to change that default, configured
      // in our case, we extend every state which ends with .generalModal
      var skipState = !endsWith(state.name, ".generalModal")

      // and return taht default
      if(skipState) 
      { 
        return data;
      }

      // the modal instance per this state instance
      var modalInstance;

      // definition of the onEnter
      var onEnter = function($modal, $state) {
          console.log("Entering state: " + $state.current.name)
          modalInstance = $modal.open({
            templateUrl:'modal.html',
            controller: 'modalCtrl',
            controllerAs: 'modalCtrl'
          });
          modalInstance.result['finally'](function() {
            modalInstance = null;
            if(endsWith($state.$current.name, ".generalModal")) {
              $state.go('^');
            }
          });
        };

      // definition of the onExit
      var onExit = function($state) { 
          console.log("Exiting state: " + $state.current.name)
          if (modalInstance) {
            modalInstance.close();
          }
      };

      // extend state with both of them
      state.self.onEnter = onEnter;
      state.self.onExit = onExit;

      return data;

    });
}])

我们扩展了名称以和 结尾的 所有子状态。就这样。在一个地方…".generalModal"onExit``onEnter

在这里检查它的作用