Question

我有点像这样的事情

<img width="100" height="177" ng-show="{{fileName}}" ng-src="{{getPath(fileName) || '' }}" class="img-thumbnail" alt="test" onerror="this.src = $(this).attr('altSrc')">

在控制器中，

 $scope.getPath = function (fileName) {

    if (fileName !== '' || fileName !== null || fileName !== undefined) {
        var random = (new Date()).getTime();
        var fillName = "/data/my uploads/" + fileName + "?v=" + random;
        return fillName;
    }
    else {
        return "//:0";
    }

在html5中

<tr ng-repeat="item in items">
    <td>
        <img width="100" height="177" ng-show="{{item.fileName}}" ng-src="{{getPath(item.fileName) || '' }}" class="img-thumbnail" alt="test"
         onerror="this.src = $(this).attr('altSrc')">
    </td>
</tr>

问题：getPath函数重复调用而不是停止。如何制止？

INFO  2015-10-02 01:11:29-63579388289280629312 - Request: GET http://localhost:26264/data/uploads/my shop/my branch/null?v=1443771685319

INFO  2015-10-02 01:11:29-63579388289280629312 - Response: GET http://localhost:26264/data/uploads/my shop/my branch/null?v=1443771685319

Answer 1

接受这样一个事实，即多次调用该函数并仅在其中放置轻量级操作。

在您的情况下，您不需要每次调用都刷新路径，而是可以在第一次调用后存储它，然后在后续调用中获取存储的值。

$scope.getPath = function (item) { // change this to item, so you can store the result
    if (item.fillName) return item.fillName; // subsequent calls after the first one go here

    // only the first one goes here
    if (item.fileName !== '' || item.fileName !== null || item.fileName !== undefined) {
        var random = (new Date()).getTime();
        item.fillName = "/data/my uploads/" + item.fileName + "?v=" + random; // store result
    }
    else {
        item.fillName = "//:0";
    }

    return item.fillName;
}

PS：拥有在每个摘要上运行的函数是正常的，例如ng-show，只是尝试使它们变亮并快速返回。

Answer 2

我认为你不需要在Angular的指令中使用插值表达式。

更改为：

<img width="100" height="177" ng-show="item.fileName" ng-src="getPath(item.fileName) || '' " class="img-thumbnail" alt="test"
         onerror="this.src = $(this).attr('altSrc')">

正如@Claies所说，如果你这样做，他们将在每个摘要周期进行评估。

调用ng-src图像

2 个答案: