页面导航后Material Design Lite输入浮动标签不起作用答案

【问题标题】：Material Design Lite input floating label not working after page navigation页面导航后Material Design Lite输入浮动标签不起作用
【发布时间】：2016-09-01 13:27:44
【问题描述】：

我目前正在使用 Material Design Lite 构建一个移动混合应用程序，但遇到了一个小问题。当我向页面添加输入字段元素时，浮动文本甚至占位符都无法正常工作。

我在我的应用程序中使用$stateProvider and $urlRouterProvider 进行页面导航。在我的index.html 中，我有<div ui-view></div>，当我的状态发生变化时，我会使用<a ui-sref="home">Home</a> 在其中注入我的观点。

我遇到的问题是，如果将以下代码插入 index.html 之外的 ui-view 当然：

  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="sample3">
    <label class="mdl-textfield__label" for="sample3">Text...</label>
  </div>

浮动标签没有问题。但是，如果我将相同的代码放置在视图中（在页面导航发生后稍后在 ui-view 元素中注入的外部页面），浮动标签将无法正常工作。标签不上浮，输入的文字不可读。

我的控制台中没有显示任何错误，我似乎无法弄清楚为什么它不起作用。 JS 文件和 CSS 已正确加载。

希望有人能帮我解决这个问题。

谢谢大家！

【问题讨论】：

我在这里找到了答案：stackoverflow.com/a/40781433/1491212

标签： angularjs html css material-design-lite

【解决方案1】：

您必须使用“componentHandler.upgradeElements()”升级元素

【讨论】：

谢谢。我会试一试，然后告诉你。
我应该在哪里调用这个函数？