Material Design Lite 的复选框设计有时不会反映

Posted 2023-03-05

【中文标题】Material Design Lite 的复选框设计有时不会反映

【英文标题】：Material Design Lite's Checkbox design not reflecting sometime

【发布时间】：2016-01-04 16:14:12

【问题描述】：

我正在使用 Material Design lite 1.0.4 和 Angular.js 1.1.3。 我创建了一个包含复选框并包含该部分文件的部分文件：

<div data-ng-include data-src="'views/partials/filter.html'"></div>

现在的问题是，当我刷新页面时，它有时会显示旧复选框，有时会显示实质性复选框。行为是不可预测的。有时它会在刷新时流畅运行。

这是复选框代码之一：

<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
    <input type="checkbox" class="mdl-checkbox__input" checked />
    <span class="mdl-checkbox__label"> less than 4000</span>
</label>

当我不使用 ng-include 时，代码可以正常工作，并将代码直接写入 html 文件。但我必须使用 ng-include，因为部分内容将包含在多个页面中，并且这也取决于某些条件（如果不需要，不想加载模板）。

【问题讨论】：

也许http://***.com/questions/32658295/material-design-lite-table-adding-rows-dynamically-breaks-format 有帮助。

【参考方案1】：

材料设计将不适用，因为内容是通过 ajax 加载的。视图加载后需要更新设计：

$rootScope.$on('$viewContentLoaded', function() 
    $timeout(function() 
        componentHandler.upgradeAllRegistered();
    ,0);
);

Material Design Lite 将在页面加载时自动注册并呈现所有标记有 MDL 类的元素。但是，在动态创建 DOM 元素的情况下，您需要使用 upgradeElement 函数注册新元素。

http://www.getmdl.io/started/index.html#dynamic