AngularJS:如何在 UI-Router 中将一个状态设置为全局父状态(使用模态作为公共部分) [英] AngularJS: How to set one state as a global parent in UI-Router (to use modal as common parts)
问题描述
在$stateProvider#state()中，我使用UI-Router为Bootrtrap-ui modal定义如下.参考
var state = {name: 'modala',父母:'家'，onEnter:函数($modal，$state){modalInstance = $modal.open({templateUrl: 'modala.html',控制器:'modalaCtrl'，控制器为:'模态'});modalInstance.result['finaly'](function() {modalInstance = null;如果($state.$current.name === 'modala'){$state.go('^');}});},退出:函数(){如果(模态实例){modalInstance.close();}}};我想在家里以外的任何地方使用modala".
我不想创建很多'modala'的定义.
有没有一种方法可以接受它，并在父级中设置必要的内容?
<小时>
添加说明
没有好的解决方案
不要在模态状态下设置父级.
结果:打开模态窗口时，父窗口不显示.
模态状态名称为 ${parent.name}.modal 格式.
结果:成功了.但是，对于一个模态窗口，需要定义很多状态.并且，每当我添加一个调用 modal 的父级时，都需要添加一个状态.
定义每个父级的模态状态
结果:与模式 2 相同.
There 已更新 plunker (问题中的第二次尝试)
我们将在实际中看到的是装饰器的不同用途，详情请见我的上一篇文章>
所以，首先，让我们有几个状态，例如'home', 'page1', 'page2' ...我们希望为他们所有人引入子状态 - 具有模态功能.模态特征预计在所有子状态中相同 - 但这些将属于不同的父状态.
为了实现它，我们可以使用这样的状态定义:
.config(function($stateProvider) {//我们只是为每个现有的父级定义空子状态$stateProvider.state('home.generalModal', {});$stateProvider.state('page1.generalModal', {});$stateProvider.state('page2.generalModal', {});})如果我们以这种方式劫持装饰器，那就足够了:
.config(['$stateProvider',功能($stateProvider){var endWith = function(stringToBesearched, valueToBeFound) {返回 stringToBesearched.slice(-valueToBeFound.length) === valueToBeFound;}$stateProvider.decorator('data', function (state, dataBuilder) {//这是原始的，由配置创建的父级var data = dataBuilder(state);//我们可以定义我们不想改变默认配置的地方//在我们的例子中，我们扩展了每个以 .generalModal 结尾的状态var skipState = !endsWith(state.name, ".generalModal")//并返回默认值如果(跳过状态){返回数据；}//每个状态实例的模态实例var modalInstance;//onEnter 的定义var onEnter = 函数($modal，$state){console.log("进入状态:" + $state.current.name)modalInstance = $modal.open({templateUrl:'modal.html',控制器:'modalCtrl'，controllerAs: 'modalCtrl'});modalInstance.result['finally'](function() {modalInstance = null;if(endsWith($state.$current.name, ".generalModal")) {$state.go('^');}});};//onExit 的定义var onExit = 函数($state){console.log("退出状态:" + $state.current.name)如果(模态实例){modalInstance.close();}};//用它们扩展状态state.self.onEnter = onEnter;state.self.onExit = onExit;返回数据；});}])我们使用 onExit 和 onEnter 扩展了每个名为 endsWith ".generalModal" 的子状态.就这样.在一个地方...
在操作中检查它这里
In $stateProvider#state(), I define it as follows for Bootrtrap-ui modal using UI-Router. 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();
}
}
};
I want to use 'modala' any place other than home.
I do not want to create a lot of definitions of 'modala'.
Is there a method to accept it, and to set what is necessary in parent?
add explanation
No good solutions
Don't set parent in modal state.
result: when open modal window, parent isn't displayed.
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.
define the modal state every parent
result:same as pattern 2.
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-Router 中将一个状态设置为全局父状态(使用模态作为公共部分)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
