使用AngularJS，如果没有定义变量，我如何选择不渲染HTML元素

Question

我正试图解决一个问题，即HTML元素使用Javascript变量来定义它应该显示的图像，但加载时出错。看看这行：

<img src="../../Images/{{variableData.data.canEdit}}.png" />

这目前运行得很好，只是在浏览器的控制台下，它显示了一个错误，说它找不到文本字符串"｛｛variableData.data.canEdit｝｝.png"。我认为这是因为AngularJS是在浏览器渲染HTML元素后加载的。

我该如何解决这个问题？

我确实尝试过在元素上使用以下Angular语句，如下所示：

ng-if="typeof(variableData.data)!=='undefined'"

但我想这没有什么区别，浏览器仍然会显示.png图像的未找到错误消息。

页面运行正常，我只是不希望那些错误消息出现在浏览器的控制台中。

有什么想法吗？

非常感谢

Answer 1

ng-if="variableData.data"     

这应该很好

Answer 2

更改

src="<img src="../../Images/{{variableData.data.canEdit}}.png" />"

至

ng-src="<img src="../../Images/{{variableData.data.canEdit}}.png" />"这样可以确保在javascript运行时之前不会尝试加载。

将ng-if更改为仅变量(ng-if="variableData.data.canEdit"(将确保在变量之后加载元素。

Answer 3

您必须只放入像这样的变量

ng-if="variableData.data.canEdit"

Answer 4

感谢@PierreEmmanuelLallemant在评论中回答了这个问题。

解决方案是在img元素中使用ng-src，然后将img元素包装在div中并使用ng-if。像这样：

<div ng-if="variableData.data.canEdit"><img ng-src="../../Images/{{variableData.data.canEdit}}.png" /></div>

使用ng-src可以确保Angular加载时设置源属性。用ng-if将img封装在div中，确保在定义variableData.data.canEdit之前不会渲染div中的任何内容。

非常感谢