在Material Design Lite的mdl菜单中评估AngularJS表达式

Question

我正在使用Angular构建一个小型单页应用程序，使用Angular进行功能，使用mdl进行设计。我想要一个下拉选择框，由于 mdl 不提供开箱即用的功能，所以我使用 mdl 菜单构建了一个。现在的问题是，Angular 似乎在评估我放入此菜单中的表达式时遇到了麻烦，也许是因为菜单仅在您单击按钮时打开？我尝试在列表项中使用表达式，这给出了表达式输出，但也给出了原始表达式，这显然是不想要的。我还尝试重复列表项，然后它们就不显示。

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

结果图片（查看左上角的评估，但原始表达式是实际的"可点击"操作）

提前感谢！

Answer 1

MDL的javascript（由mdl-js CSS类表示）可能会在Angular做任何事情之前玩弄HTML，最终创建HTML在被Angular"解析"时给出奇怪的结果。最好确保你的HTML以严格的顺序处理：Angular第一，MDL第二。

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