在 Material Design Lite 的 mdl-menu 中评估 AngularJS 表达式答案

【问题标题】：Evaluate AngularJS expression within Material Design Lite's mdl-menu在 Material Design Lite 的 mdl-menu 中评估 AngularJS 表达式
【发布时间】：2016-03-03 16:38:18
【问题描述】：

我正在构建一个小型单页应用程序，使用 Angular 来实现功能，并使用 mdl 来进行设计。我想要一个下拉选择框，因为 mdl 没有提供这个开箱即用的功能，所以我使用 mdl-menu 构建了一个。现在的问题是 Angular 似乎无法评估我放在这个菜单中的表达式，可能是因为只有当你点击按钮时菜单才会打开？我尝试在列表项中使用表达式，这给出了表达式输出，但也给出了我显然不想要的原始表达式。我还尝试 ng-repeat 列表项，然后它们就没有出现。

<button id="demo-menu-lower-left"
        class="mdl-button mdl-js-button mdl-button--icon">
  <i class="material-icons">more_vert</i>
</button>

<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
    for="demo-menu-lower-left">
  <li class="mdl-menu__item">{{5+5}}</li>
  <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
  <li disabled class="mdl-menu__item">Disabled Action</li>
  <li class="mdl-menu__item">Yet Another Action</li>
</ul>

Result pic（看左上角的求值，但原来的表达式是实际的“可点击”动作）

提前谢谢！

【问题讨论】：

标签： angularjs material-design-lite

【解决方案1】：

MDL 的 javascript（由 mdl-js CSS 类表示）可能会在 Angular 执行任何操作之前与 HTML 混为一谈，最终创建的 HTML 在被 Angular“解析”时会给出奇怪的结果。最好确保您的 HTML 以严格的顺序得到处理：Angular 第一，MDL 第二。

如果您需要在页面初始加载和呈现后使用 HTML，则在浏览器中检查 HTML 而不是依赖源 HTML 会有所帮助。任何 javascript 代码（包括 Angular）都必须使用它，而不是源代码所代表的 HTML。

【讨论】：