在$ 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' 。
'modala'
有没有一种方法可以接受它,并设置父项的必要条件?
添加说明
没有好的解决方案
结果:打开模式窗口时,不显示父级。
模式1示例
结果:有效。但是,关于一个模态窗口,必须定义许多状态。并且,每当我添加一个调用模态的父母时,都必须添加一个状态。
模式2范例
结果:与模式2相同。
模式3示例
有更新的插件 (问题中的 第二次尝试)
我们将在操作中看到的是装饰器的不同用法,如我之前的文章中详细描述的那样
因此,首先,让我们提供几种状态,例如“ 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
".generalModal"
onExit``onEnter
在这里检查它的作用