Question

我实际上是使用angular，ui-router和mdl创建应用程序，但是当我更改视图时，输入占位符不再起作用。

以下是我的登录页面的代码（在玉中）

.mdl-card.mdl-shadow--2dp
  form(name="loginForm" ng-submit="doLogin(loginForm)" novalidate)
    .mdl-card__title.mdl-card--expand
      h2.mdl-card__title-text(translate="authentication.login.title")
    .mdl-card__supporting-text
      .mdl-textfield.mdl-js-textfield.mdl-textfield--floating-label(ng-class="getClass(loginForm.email)")
        input.mdl-textfield__input(
          type="email"
          name="email"
          ng-model="login.email"
          required
        )
        label.mdl-textfield__label(translate="account.email")
        span.mdl-textfield__error(
          ng-repeat="(key, value) in loginForm.email.$error"
          translate="authentication.error.email.{{ key }}"
        )
      .mdl-textfield.mdl-js-textfield.mdl-textfield--floating-label(ng-class="getClass(loginForm.email)")
        input.mdl-textfield__input(
          type="password"
          name="password"
          ng-model="login.password"
          required
        )
        label.mdl-textfield__label(translate="account.password")
        span.mdl-textfield__error(
          ng-repeat="(key, value) in loginForm.password.$error"
          translate="authentication.error.password.{{ key }}"
        )
      .mdl-typography--text-center
        button.mdl-button.mdl-js-button.mdl-button--raised.mdl-js-ripple-effect(
          type="submit"
          ng-disabled="loginForm.$invalid"
          translate="authentication.login.button"
        )
      .mdl-typography--text-center
        button.mdl-button.mdl-js-button.mdl-js-ripple-effect(
          ui-sref="authentication-register"
          translate="authentication.register.title"
        )
        button.mdl-button.mdl-js-button.mdl-js-ripple-effect(
          ui-sref="authentication-request-password"
          translate="authentication.requestPassword.title"
        )

你有什么想法吗？

Answer 1

好的，我找到了答案：根据材料设计精简文档（http://www.getmdl.io/started/index.html#dynamic），动态Dom必须注册。

因此，以这种方式将每个组件包装在一个angular指令中应该更好。

Answer 2

我在您提供的代码中没有看到任何占位符属性。这是带有占位符属性的更新代码：

.mdl-card.mdl-shadow--2dp
  form(name="loginForm" ng-submit="doLogin(loginForm)" novalidate)
    .mdl-card__title.mdl-card--expand
      h2.mdl-card__title-text(translate="authentication.login.title")
    .mdl-card__supporting-text
      .mdl-textfield.mdl-js-textfield.mdl-textfield--floating-label(ng-class="getClass(loginForm.email)")
        input.mdl-textfield__input(
          type="email"
          name="email"
          ng-model="login.email"
          required
          placeholder="email"
        )
        label.mdl-textfield__label(translate="account.email")
        span.mdl-textfield__error(
          ng-repeat="(key, value) in loginForm.email.$error"
          translate="authentication.error.email.{{ key }}"
        )
      .mdl-textfield.mdl-js-textfield.mdl-textfield--floating-label(ng-class="getClass(loginForm.email)")
        input.mdl-textfield__input(
          type="password"
          name="password"
          ng-model="login.password"
          required
          placeholder="password"
        )
        label.mdl-textfield__label(translate="account.password")
        span.mdl-textfield__error(
          ng-repeat="(key, value) in loginForm.password.$error"
          translate="authentication.error.password.{{ key }}"
        )
      .mdl-typography--text-center
        button.mdl-button.mdl-js-button.mdl-button--raised.mdl-js-ripple-effect(
          type="submit"
          ng-disabled="loginForm.$invalid"
          translate="authentication.login.button"
        )
      .mdl-typography--text-center
        button.mdl-button.mdl-js-button.mdl-js-ripple-effect(
          ui-sref="authentication-register"
          translate="authentication.register.title"
        )
        button.mdl-button.mdl-js-button.mdl-js-ripple-effect(
          ui-sref="authentication-request-password"
          translate="authentication.requestPassword.title"
        )

输入占位符不使用angular和ui.router

2 个答案: