Angular Material 当 icon-属性从范围中填充时，图标将不起作用

Question

我有一个关于从 github here 克隆的 Angular Material 图标的问题。当我使用 ng-md-icon 指令并以某种方式像 icon="cancel" 那样指定图标时，它按预期工作。一旦我尝试从 icon="{{myIconSet.dialogButtonCancel}}（也指向 "cancel"）这样的范围填充它，问号图标就会出现。在 chrome 的开发控制台中查看 html 时，两个图标属性都显示 icon="cancel"。下面我包含了代码，从开发控制台生成 html 和渲染结果。我无法提供 plunker，因为我不能（！）重现此行为。我在网上寻找 quite 一段时间，并尝试了很多其他人建议在类似情况下做的事情（不同的浏览器和图标，改变了我 [=33 中加载 .js 文件的顺序） =]，加载 above/below 折叠，更改将模块注入应用程序的顺序..） - 但没有任何效果。我正在使用 angular、uibootstrap、bootstrap 通知和 jquery.

代码片段：

        <div id="dialogButtonEndApp" class="dialogButton materialIconShadow" style="float:left">
            <ng-md-icon icon="cancel" style="fill: black" size="60"></ng-md-icon>
        </div>

        <div id="dialogButtonCancel" class="dialogButton materialIconShadow activeButton" style="float:right">
            <ng-md-icon icon="{{myIconSet.dialogButtonCancel}}" style="fill: white" size="60"></ng-md-icon>
        </div>

生成 Html 文档：

<div class="dialogButtonArea">

        <div id="dialogButtonEndApp" class="dialogButton" style="float:left">
            <ng-md-icon icon="cancel" style="fill: black" size="60"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="60" height="60"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"></path></svg></ng-md-icon>
        </div>

        <div id="dialogButtonCancel" class="dialogButton materialIconShadow activeButton" style="float:right">
            <ng-md-icon icon="cancel" style="fill: white" size="60"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="60" height="60"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"></path></svg></ng-md-icon>
        </div>

    </div>

And the rendered result

有人知道这里发生了什么吗？感谢您的任何建议。

Answer 1

repo 的所有者正在使用 attire.$observe('icon', replace); 并且在找不到图标时使用问号作为默认图标。

说问题是使用插值的图标属性（{{}}），第一次是使用{{myIconSet.dialogButtonCancel}}作为图标，因为它不是有效的，它使用问号。但是一旦表达式被评估，它应该更新为新的，正如你看到的 html 说取消。

我会转到指令代码中的 replace 函数并检查它是否正在触发以及它的值是多少。

如果您在另一个指令中使用它，请将图标放在其他地方进行测试，看看会发生什么。您始终可以手动更改图标属性。

Angular Material 当 icon-属性从范围中填充时，图标将不起作用

Angular Material Icons won't work when icon-property is filled from scope

angularjs

icons