Javascript AngularJS：如何在UI路由器中将一个状态设置为全局父级（将modal用作公共部分）

在$stateProvider#state（）中，我使用ui路由器为Bootrtrap ui模式定义如下

我想在家以外的任何地方使用“莫达拉”

我不想为“modala”创建太多的定义

是否有一种方法可以接受它，并在父级中设置所需的内容

---

添加解释

没有好的解决办法

不要将父级设置为模态状态

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

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

结果：成功了。但是，对于一个模态窗口，有必要定义许多状态。而且，每当我添加调用modal的父级时，都需要添加一个状态

定义每个父级的模式状态

结果：与模式2相同

---

您所要做的就是将属性

parent:modala

添加到您定义的所有子状态，以便设置父状态。

UI路由器内部构建了一个名为状态装饰器的解决方案

通过这种方式，我们可以创建一个方面，该方面稍后将被注入到我们想要的任何状态中。这方面，可能会推动一些共同的全球环境。例如，

父视图

或

视图

请在此查看一个示例：，小引用：

允许您（小心地）扩展或覆盖$stateProvider内部使用的stateBuilder对象（自行承担风险）。这可用于向ui路由器添加自定义功能，例如根据状态名称推断templateUrl

对于我们的场景来说，这是不可能的

我们需要的是装饰师的定义，如下所示：

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

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

      // we can define where we do not want to change that default, configured
      var skipState = state.name === "home" 
                   || state.name === "modala"
                      // child already has that in parent
                   || state.name.indexOf(".") > 0 ;

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

      // FINALLY - HERE
      //   we want to change parent, or even introduce new
      state.parent = 'modala'; 

      // and rebuild it
      result = parent(state);

      // new parent in place
      return result;

    });
}])

.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', {});
})

在那里检查一下（问题的答案）

我们在实际操作中看到的是decorator的不同用法，在我的

因此，首先，让我们有几个状态，例如“home”、“page1”、“page2”。。。我们希望他们都能引入子状态——具有模态功能。所有子州的模态特征预计都是相同的，但它们属于不同的父州

要实现这一点，我们可以使用如下状态定义：

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

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

      // we can define where we do not want to change that default, configured
      var skipState = state.name === "home" 
                   || state.name === "modala"
                      // child already has that in parent
                   || state.name.indexOf(".") > 0 ;

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

      // FINALLY - HERE
      //   we want to change parent, or even introduce new
      state.parent = 'modala'; 

      // and rebuild it
      result = parent(state);

      // new parent in place
      return result;

    });
}])

.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的子状态。这就是全部。在一个地方

---

在行动中检查它

我也想找到解决方案。我终于解决了

---

请参见我的

您可能会发现此文档很有帮助：谢谢您Aaron Leon。但是。”莫达拉不是父母“莫达拉”是一个数量庞大的孩子。我不写太多的“莫达拉”状态设置；（states=[{name:'home.modala'，…}，{name:'list.mocals'，…}，…}，…}，…..）；我不确定我是否完全理解您的问题，但是如果您想让未指定数量的状态重用“modala”代码，那么您将希望将“modala”视为抽象的父状态，并让您的所有子状态都使用“modala”作为家长。您是否介意提供modala.html和modalaCtrl的代码，以便我们更好地了解您正在尝试做什么？也许您正在尝试创建一个孩子的示例。谢谢。添加示例。当我看到您时，我很高兴：）因此，如果我正确理解您的问题，您有页面（例如，第1页和第2页）您想将这些页面放入模式窗口。您遇到的问题是您必须重新定义page1.modal状态和page2.modal状态，而您只想定义一次模式？谢谢您的回答。“modala”不是家长。“modala”是孩子。很抱歉，我的英语解释不好。我想制作一个示例，因为解释很难。谢谢你。我不知道你来的好不好，但补充了解释。我用了你的第二次尝试，并尽我所能向你展示了如何在行动中使用上述解决方案。希望你现在有你的答案；）非常感谢你的建议！这个方法实现了我想要做的。我认为能够用复数形式“模态”来表达：