Input placeholder not working with angular and ui.router

Question

I'm actually making an application with angular, ui-router and mdl, but when I change the view, input placeholder doesn't work anymore.

Here is the code of my login page (in jade)

.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"
        )

Have you any idea ?

score 2 · Answer 1 · answered Jul 08 '15 at 21:14

2

Okay I've found the answer : according to material design lite documentation (http://www.getmdl.io/started/index.html#dynamic) dynamic Dom have to be registered.

So, in that way It should be better to wrap each component in an angular directive.

answered Jul 08 '15 at 21:14

Jeremie

378
1
3
15

score 0 · Answer 2 · answered Jul 08 '15 at 17:15

I don't see any placeholder attributes in the code you provided. Here's the updated code with placeholder attributes:

.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"
        )

It's the placeholder made by material design. It's the label that is placed as the placeholder and which go upside the input after blur — Jeremie, Jul 08 '15 at 18:21

Input placeholder not working with angular and ui.router

2 Answers2