javascript - 获取模板并将其附加到 DOM 后的 UI-Router Hook

Question

我们必须支持遗留模块，该模块需要在获取模板并将其附加到 dom 后运行同步代码。

我们正在从自定义路由器迁移到 UI-Router 。路由已成功解析并且模板已正确获取。但是，我似乎找不到允许我在加载模板后 Hook 的转换。

详细信息:

• UI 路由器:1.0.0-rc.1
• Angular :1.5.8

我已经尝试过onSuccess hook返回与 then 回调链接的已解析的 promise。然而，这仍然在转换生命周期内，并且模板尚未附加/插入到 dom 中。在状态定义中使用解析 block 也是如此。

在onSuccess之后执行超时。这显然有效，但不是解决方案。

我们确实有redux-ui-router因此我可以在调用 onSuccess 时调度一个 thunk，但这需要对旧模块进行额外的重构。

任何信息或想法将不胜感激。

谢谢!

Answer 1

onSuccess 已走在正确的轨道上。 onSuccess Hook 被调用以响应成功的状态机转换。 UI-Router itself synchronizes the views using an onSuccess hook使用默认优先级 0。当 View 同步时，模板将被编译并添加到 DOM 中。

通过注册一个优先级稍低的onSuccess钩子(Hook)，你的钩子(Hook)将在 View 同步钩子(Hook)完成后被调用。

app.run(function($transitions) {
  $transitions.onSuccess({}, yourhook, { priority: -1 } )
});

请注意，由于摘要循环，AngularJS 模板渲染本质上是异步的。

<小时/>

这里有一个 plunker 演示了这两点:

• 钩子(Hook)在 View 同步之前和之后都有一个调试器

• 直到摘要循环完成后，模板变量插值才完成

http://plnkr.co/edit/OpKexobSQ6WTrP87k4Tb?p=preview