javascript - 使用 ui-router 时出现 Angular mdl-stepper 问题

Question

我正在尝试使用 mdl-stepper，当我在 index.html 页面中添加步进器时，它工作正常。请找到下面的 plunker 链接

"https://plnkr.co/edit/m7EGqw?p=preview"

但是当我在单独的 html 中执行相同的操作并使用 ui-router 时，它不起作用。

"https://plnkr.co/edit/ixMI8FKbhyTgL5sYieVa?p=preview"

请告诉我问题是什么？

Answer 1

Stepper 使用 (componentHandler) Material Design Lite 模式来注册新组件，并在文档加载时自动升级以及在初始页面加载后可能添加的组件。

在您的情况下，Stepper 是通过异步请求添加的(在初始页面加载后)。为此，您必须手动升级 Stepper 组件才能正常工作。

异步中的代码。请求回调:

// The Stepper registers itself. Since you are adding dynamically, then you 
// need to upgrade it. This line will upgrade all components that must.
componentHandler.upgradeAllRegistered();