AngularJS：如何设置一个状态在UI的路由器的全球母公司（使用模态作为通用零件）

问题描述

在$ stateProvider＃状态（），我把它定义为使用的UI路由器Bootrtrap的UI模式如下。 reference

  VAR状态= {
    名称：'modala'，
    家长：'家'，
    的OnEnter：函数（$模式，$州）{
        modalInstance = $ modal.open（{
            templateUrl：modala.html'，
            控制器：'modalaCtrl'，
            controllerAs：模式
        }）;
        modalInstance.result ['finaly']（函数（）{
            modalInstance = NULL;
            如果（$状态。$ current.name ===modala'）{
                $ state.go（'^'）;
            }
        }）;
    }，
    onExit：功能（）{
        如果（modalInstance）{
            modalInstance.close（）;
        }
    }
};
 

我想用'modala比家中其他任何地方。

我不希望创建大量的 'modala

的定义

---

add explanation

No good solutions

1. Don't set parent in modal state.

   result: when open modal window, parent isn't displayed.

   pattern 1 example

2. modal state name is ${parent.name}.modal format.

   result: It's work. but, About one modal window, it is necessary to define many states. and, It is necessary to add a state whenever I add an parent who call modal.

   pattern 2 exapmle

3. define the modal state every parent

   result:same as pattern 2.

   pattern 3 exapmle

解决方案

There is updated plunker (the second try from the question)

What we would see in action, is different use of decorator, as in detail described in my previous post

So, firstly, let's have few states e.g. 'home', 'page1', 'page2' ... and we would like for all of them introduce the child state - with modal functionality. That modal features are expected to be the same across all child states - but these will belong to different parents.

To make it happen we can use state definition like this:

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

And that could be enough, if we will hijack the decorator this way:

.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;

    });
}])

We extended every child state which name endsWith ".generalModal" with onExit and onEnter. That's all. At one place...

Check it in action here

这篇关于AngularJS：如何设置一个状态在UI的路由器的全球母公司（使用模态作为通用零件）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！