我正在制作一个具有动态状态的应用程序,有时我需要从 url 中解析状态名称。
例如:我有 /dashboard/user/12268
,我需要获取状态 'dashboard.user'
。
ui-router
提供的工具有没有办法做到这一点?我现在找不到如何执行此操作...
我正在制作一个使用 requireJS 加载动态模块的应用程序。第一次没有问题,因为用户被发送到登录状态。登录后,我使用 require 只加载用户有权访问的状态。但是当用户重新加载页面时,我再次加载模块,并且需要将 url 解析为状态,这就是问题所在。我已经开始尝试使用 urlMatcherFactory 但无法解决它们。
状态在 URL 解析后加载。
流程是(页面http://localhost:8090/index.html#/dashboard/user/12268
刷新后):
- 引导应用程序(无状态)
- 此时,
ui-router
已经加载完毕 - 获取用户有权访问的状态,并注册它们(这些状态在配置阶段之后注册)
- 查明我是否有一个与给定 url 匹配的状态以重定向到那里。这就是我被困的地方。
为了在应用程序引导后加载状态,我使用了 Ben Nadel's solution 的变体。包括状态和常量。
我在 RequireJS 中的 data-main
有这样的初始化代码:
require.config({
// REQUIREJS CONFIGURATION
});
require(['app'], function (app) {
app.bootstrap(document);
var ng = angular.injector(['ng']);
var $window = ng.get('$window')
var $q = ng.get('$q');
var appStorage = $window.localStorage;
var loadedManifests;
try {
loadedManifests = JSON.parse(appStorage.getItem('loadedManifests'));
} catch(e) {
loadedManifests = [];
}
if (!angular.isArray(loadedManifests) || loadedManifests.length === 0) {
$q.all([
app.loadManifest('login/manifest'), //loadMainfest function loads the states for login
app.loadManifest('logout/manifest') //load states for logout
])
.then(function () {
app.injector.get('$rootScope').$evalAsync(function () {
app.injector.get('$state').go('login');
});
});
} else {
var promisesArray = [];
for(var i = 0; loadedManifests[i]; i++) {
promisesArray.push(app.loadManifest(loadedManifests[i])); //load all manifests registered on localstorage
}
$q.all(promisesArray).then(function(){
//TODO: Stuck. Get URL from querystring and resolve to valid state, or redirect to /login
});
}
});
loadManifest
函数在我的应用程序(服务、工厂、 Controller 、路由器等)上注册所有后引导元素。
谢谢你的帮助,
阿尔克斯
最佳答案
https://github.com/angular-ui/ui-router/issues/1651
您可以使用 $stateProvider
上的 .decorator
Hook 来公开内部状态实现。您可以装饰状态生成器的任何属性;我随意选择了“ parent ”。
app.config(function($stateProvider) {
$stateProvider.decorator('parent', function (internalStateObj, parentFn) {
// This fn is called by StateBuilder each time a state is registered
// The first arg is the internal state. Capture it and add an accessor to public state object.
internalStateObj.self.$$state = function() { return internalStateObj; };
// pass through to default .parent() function
return parentFn(internalStateObj);
});
});
现在您可以使用 .$$state()
访问内部状态对象,例如
var publicState = $state.get("foo");
var privateInternalState = publicState.$$state();
其次,遍历 $state.get() 中的每个状态并根据您的 URL 片段测试它们。
angular.forEach($state.get(), function(state) {
var privatePortion = state.$$state();
var match = privatePortion.url.exec(url, queryParams);
if (match) console.log("Matched state: " + state.name + " and parameters: " + match);
});
关于javascript - ANGULAR-UI-ROUTER:从 URL 解析状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29892353/