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

Question

我正在构建一个微型单页应用程序，使用 Angular 的功能和 mdl 的设计。我想要一个下拉 select 框，因为 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（看左上角的评价，原来的表达才是实际的"clickable"动作）

提前致谢！

Answer 1

MDL 的 javascript（由 mdl-js CSS 类表示）可能会在 Angular 可以做之前与 HTML 混在一起任何东西，最终创建 HTML 当 'parsed' by Angular 时会给出奇怪的结果。最好确保您的 HTML 以严格的顺序进行处理：首先是 Angular，其次是 MDL。

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

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

Evaluate AngularJS expression within Material Design Lite's mdl-menu

angularjs

material-design-lite