javascript - AngularJS:如何在 UI-Router 中将一个状态设置为全局父级(使用模态作为公共(public)部分)

Question

在 $stateProvider#state() 中，我为使用 UI-Router 的 Bootrtrap-ui 模态定义如下。 reference

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' 的定义。

Is there a method to accept it, and to set what is necessary in parent?

---

添加说明

没有好的解决方案

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

   结果:打开模态窗口时，parent不显示。

   pattern 1 example

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

   结果:成功了。但是，对于一个模态窗口，需要定义很多状态。并且，每当我添加一个调用模态的父项时，都需要添加一个状态。

   pattern 2 exapmle

3. 定义每个父级的模态状态

   结果:与模式 2 相同。

   pattern 3 exapmle

Answer 1

有is updated plunker (问题中的 second try)

我们将在实际操作中看到装饰器的不同用法，如我的 previous post 中详细描述的那样

所以，首先，让我们有几个状态，例如'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;

    });
}])

我们用 onExit 和 onEnter 扩展了每个名为 endsWith ".generalModal" 的子状态。就这样。在一个地方...

实际检查 here