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

标签 javascript angularjs angular-ui-router

我们必须支持遗留模块,该模块需要在获取模板并将其附加到 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,但这需要对旧模块进行额外的重构。

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

谢谢!

最佳答案

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

关于javascript - 获取模板并将其附加到 DOM 后的 UI-Router Hook ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43851331/

相关文章:

javascript - 在 UI-Router 中调用子状态时触发无限循环

javascript - 页面刷新后,ui-router 看不到 url 搜索参数

javascript - 在维基媒体/维基百科中搜索文件

javascript - 如何在 Angular js中创建多列组合框

javascript - 为什么我的 $state.go 只能在 setTimeout 内工作?

javascript - AngularJS如何在与指令相同的级别要求ngForm

javascript - Angularjs:即使按下页面按钮后,dir-pagination-controls 也不显示下一页

javascript - WinJS加载本地json文件

javascript - HighCharts 从 CSV 读取基本示例

javascript - 当我在函数参数 : Why is that? 中声明新变量时出现错误