Material Design Lite nicht formatieren Formelemente auf Navigation

Question

Ich verwende Material Design Lite für einen Proof of Concept. Ich habe eine Seite mit einem Formular, das beim Laden mit Backend-Daten ausgefüllt wird. I aufgefallen, dass bei der Verwendung von Winkel navigiert, das Formularfeld Etikettenformat nicht richtig angewandt wird

wenn die URL direkt zugreifen, um die Seite neu geladen oder den Wert im Eingang Modifiziert das Format angewandt wird, wie

erwartet

-Code

<div class="mdl-cell--12-col"> 
    <div> 
     <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
      <input class="mdl-textfield__input" type="text" id="name" name="name" ng-model="vm.benefit.name"> 
      <label class="mdl-textfield__label" for="name">Nombre</label> 
     </div> 
    </div> 
    <div> 
     <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
      <textarea class="mdl-textfield__input" type="text" rows="2" id="description" ng-model="vm.benefit.description"></textarea> 
      <label class="mdl-textfield__label" for="description">Descripción</label> 
     </div> 
    </div> 
</div> 
<div class="mdl-grid"> 
    <div class="mdl-cell--4-col"> 
     <h6>Tipo</h6> 
     <ul class="demo-list-control mdl-list"> 
      <li class="mdl-list__item" ng-repeat="type in vm.benefitTypes"> 
       <span class="mdl-list__item-primary-content"> 
        {{type.text}} 
       </span> 
       <span class="mdl-list__item-secondary-action"> 
        <label class="demo-list-radio mdl-radio mdl-js-radio mdl-js-ripple-effect" for="list-option-{{type.id}}"> 
         <input type="radio" id="list-option-{{type.id}}" class="mdl-radio__button" name="options" value="Descuento directo" ng-model="vm.benefit.type" checked /> 
        </label> 
       </span> 
      </li> 
     </ul> 
    </div> 

Aufruf componentHandler.upgradeAllRegistered() führt keine Änderung durch. Irgendeine Ahnung?

Answer 1

Wenn Sie den Inhalt der fehlenden Eingabe ausfüllen, fügen Sie zuerst die Klasse is-dirty jedem Eingabefeld hinzu. Sie können das Verhalten dieser Komponente hier überprüfen: https://codepen.io/anon/pen/EjRLVL

weiter rocken!