在我的应用程序的初始加载为什么ui-router状态未设置?

时间:2022-01-28 12:39:25

When I go to my app at https://localhost/my-app/resources/index.html, I have logic to go to my self-defined default state. However when I want to go directly to a specific part of my app (i.e. https://localhost/my-app/resources/index.html#/orders/draft) the state is not getting set (nor is the template loaded into the ui-view directive). Once that initial load is done (with the default state set), then I can do direct urls to my hearts content.

当我通过https://localhost/my-app/resources/index.html访问我的应用程序时,我有逻辑进入我自定义的默认状态。但是,当我想直接转到我的应用程序的特定部分(即https://localhost/my-app/resources/index.html#/orders/draft)时,状态未设置(模板也未加载到ui-view指令)。一旦初始加载完成(设置了默认状态),那么我可以直接在网址内容中添加内容。

I think I'm missing some basic concept in how things are loaded in my app, but I would expect that the state would get set since the url is defined in $location.url()

我想我错过了一些关于如何在我的应用程序中加载内容的基本概念,但我希望状态会被设置,因为url是在$ location.url()中定义的

A snippet of my code to handle states on initial load:

我的代码片段用于处理初始加载时的状态:

$http.get("Navigation").then(function(response){
    var navigationObjects = response.data,
        directUrl = $location.url(),
        stateName = null;

    scope.availableStates = ims360RouterStateService.getAvailableStates(navigationObjects);
    if (!directUrl)
    {
        scope.updatePrimaryState(scope.availableStates[0]);
    }
    else
    {
        //TODO there's probably a better way to do this
        //parsing out the state name, requires that the state name matches the url, this fails when I have a place holder (such as an id to a resource)
        stateName = directUrl.substring(1).replace(/\//g, ".");
        $state.go(stateName);
    }
});

In this code I get navigation objects from the server which determine which ui-router states the user has access to. All my defined states are then filtered down to the availableStates which are what I use for my navigation ui.

在这段代码中,我从服务器获取导航对象,确定用户可以访问哪些ui-router状态。然后我所有定义的状态都被过滤到可用状态,这些是我用于导航ui的状态。

Additionally, the "updatePrimaryState(...) includes a call to $state.go(...)

此外,“updatePrimaryState(...)包括对$ state.go(...)的调用

So, why is the state not set on initial load? And if that IS expected behavior, then what is a good way to direct the user to the url specified?

那么,为什么状态没有设置初始加载?如果这是预期的行为,那么将用户引导到指定的网址的好方法是什么?

UPDATE

UPDATE

I created a plunker that shows the expected behavior (http://plnkr.co/edit/m9gQLOZmqaAY88wSc6wC?p=preview). I tried to duplicate my issue, but in the simple case it just works as expected. So obviously there is something on my end that is incorrect, but my setup is very similar to that in the plunker. To test the scenario I am seeing in my app you'd need to:

我创建了一个显示预期行为的plunker(http://plnkr.co/edit/m9gQLOZmqaAY88wSc6wC?p=preview)。我试图复制我的问题,但在简单的情况下,它只是按预期工作。显然,我的结果有些不对,但我的设置与plunker中的设置非常相似。要测试我在我的应用程序中看到的场景,您需要:

  1. launch the plunker view in a separate window
  2. 在单独的窗口中启动plunker视图
  3. After verifying that the state is set, copy and paste the link into a new window.
  4. 验证状态已设置后,将链接复制并粘贴到新窗口中。
  5. In this new window, the app should go directly to the state that matches the url. In the plunker this works, but in my app, it does not.
  6. 在这个新窗口中,应用应该直接进入与网址匹配的状态。在plunker这可以工作,但在我的应用程序中,它没有。

After my app is loaded, the state loaded is the empty state named: "" with the url "^".

加载我的应用程序后,加载的状态是名为“”的空状态,其中包含URL“^”。

UPDATE 2 After digging into the code looking for the difference, I found that when the angular "$locationChangeSuccess" is broadcast, the listener in ui-router is not initialized yet. I'm finding the difference is that we have a separate (reusable) login app that is bootstrapped initially, which then upon successful login, bootstraps the actual app. At the time the actual app is bootstrapped, the $locationChangeSuccess has already been broadcast and the ui-router listener isn't initialized yet to catch it.

更新2在深入研究寻找差异的代码后,我发现当广播角度“$ locationChangeSuccess”时,ui-router中的监听器尚未初始化。我发现不同之处在于我们有一个单独的(可重用的)登录应用程序,最初是自助引导的,然后在成功登录后,引导实际的应用程序。在实际应用程序被引导时,$ locationChangeSuccess已经被广播,并且ui-router侦听器尚未初始化以捕获它。

My thought has been to rebroadcast the event after my app is bootstrapped, but I'm still having timing issues where the event listener is seemingly the last thing initialized. I first added it to a myApp.run() block, but the broadcast was still happening beforehand. Putting the broadcast into the app's main directive's link function (where the ui-view is) works, but not sure this is a good approach. Is there a better way?

我的想法是在我的应用程序启动后重新播放该事件,但我仍然遇到时间问题,其中事件监听器似乎是最初初始化的事情。我首先将它添加到myApp.run()块,但广播仍在事先发生。将广播放入应用程序的主要指令的链接功能(ui-view所在的位置)有效,但不确定这是一个好方法。有没有更好的办法?

2 个解决方案

#1


4  

I've just found this http://niclassahlin.com/2014/05/31/kickstarting-angular-ui-router/ and it works like charm for me.

我刚刚发现这个http://niclassahlin.com/2014/05/31/kickstarting-angular-ui-router/它对我来说就像魅力一样。

With the next code in your app.js you could achieve the initial state:

使用app.js中的下一个代码,您可以实现初始状态:

app.run(['$state', function ($state) {}])

#2


2  

I figured I'd better go ahead and post my 2nd update as the solution, which it was for my case:

我想我最好继续发布我的第二次更新作为解决方案,这是我的情况:

After digging into the code looking for the difference, I found that when the angular "$locationChangeSuccess" is broadcast, the listener in ui-router is not initialized yet. I'm finding the difference is that we have a separate (reusable) login app that is bootstrapped initially, which then upon successful login, bootstraps the actual app. At the time the actual app is bootstrapped, the $locationChangeSuccess has already been broadcast and the ui-router listener isn't initialized yet to catch it.

在深入研究寻找差异的代码后,我发现当广播角度“$ locationChangeSuccess”时,ui-router中的监听器尚未初始化。我发现不同之处在于我们有一个单独的(可重用的)登录应用程序,最初是自助引导的,然后在成功登录后,引导实际的应用程序。在实际应用程序被引导时,$ locationChangeSuccess已经被广播,并且ui-router侦听器尚未初始化以捕获它。

Putting the broadcast into the app's main directive's link function (where the ui-view is) works, but not sure this is a good approach.

将广播放入应用程序的主要指令的链接功能(ui-view所在的位置)有效,但不确定这是一个好方法。

Hope that helps.

希望有所帮助。

#1


4  

I've just found this http://niclassahlin.com/2014/05/31/kickstarting-angular-ui-router/ and it works like charm for me.

我刚刚发现这个http://niclassahlin.com/2014/05/31/kickstarting-angular-ui-router/它对我来说就像魅力一样。

With the next code in your app.js you could achieve the initial state:

使用app.js中的下一个代码,您可以实现初始状态:

app.run(['$state', function ($state) {}])

#2


2  

I figured I'd better go ahead and post my 2nd update as the solution, which it was for my case:

我想我最好继续发布我的第二次更新作为解决方案,这是我的情况:

After digging into the code looking for the difference, I found that when the angular "$locationChangeSuccess" is broadcast, the listener in ui-router is not initialized yet. I'm finding the difference is that we have a separate (reusable) login app that is bootstrapped initially, which then upon successful login, bootstraps the actual app. At the time the actual app is bootstrapped, the $locationChangeSuccess has already been broadcast and the ui-router listener isn't initialized yet to catch it.

在深入研究寻找差异的代码后,我发现当广播角度“$ locationChangeSuccess”时,ui-router中的监听器尚未初始化。我发现不同之处在于我们有一个单独的(可重用的)登录应用程序,最初是自助引导的,然后在成功登录后,引导实际的应用程序。在实际应用程序被引导时,$ locationChangeSuccess已经被广播,并且ui-router侦听器尚未初始化以捕获它。

Putting the broadcast into the app's main directive's link function (where the ui-view is) works, but not sure this is a good approach.

将广播放入应用程序的主要指令的链接功能(ui-view所在的位置)有效,但不确定这是一个好方法。

Hope that helps.

希望有所帮助。