0

我实际上正在使用 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"
        )

你有什么想法吗？

4

2 回答 2

2

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

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

于 2015-07-08T21:14:27.643 回答
0

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

.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"
        )
于 2015-07-08T17:15:15.700 回答