Question

我目前正在使用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。

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

谢谢大家！

Answer 1

您必须使用＆＃34; componentHandler.upgradeElements（）＆＃34;

升级元素

页面导航后，Material Design Lite输入浮动标签无效

1 个答案: