Material Design Lite不在導航上格式化表單元素

Question

我正在使用材料精簡版進行概念驗證。 我有一個頁面，該頁面的表單在加載時將預先填充有后端數據。 我注意到在使用角度導航時，表單字段標簽格式未正確應用

直接訪問url，重新加載頁面或修改輸入中的值時，將按預期方式應用格式

碼

<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>

調用componentHandler.upgradeAllRegistered()不會進行任何更改。 有什么線索嗎？

Answer 1

當您在輸入中填充內容時，最初缺少將is-dirty類添加到每個輸入字段中。 您可以在此處檢查該組件的行為： https : //codepen.io/anon/pen/EjRLVL

繼續搖擺！