Question

我正在使用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，因为partial会包含在多个页面上，这也取决于某些条件（如果不需要则不想加载模板）。

Answer 1

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

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

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

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

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

1 个答案: