angularjs - Material Design Lite 输入 float 标签在页面导航后不起作用

Question

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

我正在使用 $stateProvider and $urlRouterProvider在我的页面导航应用程序中。在我的里面 index.html我有<div ui-view></div>当我的状态改变时，我使用 <a ui-sref="home">Home</a> 注入(inject)我的观点例如。

我遇到的问题是，如果将以下代码插入到 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>

float 标签没问题。但是，如果我将相同的代码放置在 View 中(在页面导航发生后稍后注入(inject)到 ui-view 元素中的外部页面)， float 标签将无法正常工作。标签不 float ，输入的文字不可读。

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

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

谢谢大家!

Answer 1

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