Question

在我的页面中，我有一个使用ng-repeat指令创建的表，表格单元格有这个代码

<span ng-if="row.p3Caption!=''">
                            <img alt="{{row.p3Caption}}" height="32" width="32"
                                 title="{{row.p3Caption}}"
                                 src="{{getImageData(row.dailyPic3, row.p3Caption)}}" />

getImageData具有以下代码：

$scope.getImageData = function (rowData, fileName) {
            var ext = fileName.split('.').pop();
            if (ext.toLowerCase() == "ico")
                ext = "x-icon";

            return "data:image/" + ext + ";base64," + rowData;            
        };

该页面在浏览器中看起来没问题，例如我确实看到我的行中的图像很好。但是，在控制台（在谷歌浏览器中）中，我看到以下错误消息：

％7B％7BgetImageData（row.dailyPict，％20row.p1Caption）％7D％7D：1 GET http://localhost:9753/AppName/%7B%7BgetImageData(row.dailyPict,%20row.p1Caption)%7D%7D 404（未找到）

我还看到在我的API控制器代码返回网格数据之前出现此错误。

那么，我该怎么做才能避免在Console中出现这些错误，例如：我得到数据后才评估图像来源？

Answer 1

评估过早发生的原因可能是因为页面在接收数据之前加载，但是当数据存在于数据绑定时会重新评估。

正在发布的错误是说它无法找到src所在的文件，因为该路径实际上是失败的评估文本。

我相信如果您更改ng-if以检查它是否真实（奖励：''不是真的）。这应该是因为当row.p3Caption为空/未定义时，评估不会发生。

如果ng-if="row.p3Caption"无效，请尝试ng-if="!!row.p3Caption"

Answer 2

我通过查看我们的解决方案并在chtml文件中搜索src =来解决问题。我必须使用ng-src而不是src。使用ng-src有助于摆脱错误。

angularJS - 评估发生得太早了？

2 个答案: