Question

我正在尝试测试图像是否存在其他显示字母代替图像但无法使其工作。

app.controller('task1Controller',['$scope', 'taskFactory', '$state', 'imageTestService', function($scope, taskFactory, $state, imageTestService){

    $scope.taskData = {};
    $scope.current = 0;

    taskFactory.get().then(function(response){
        $scope.jsonData = response.data.resultCareGivers;
    });

    $scope.IsValidImageUrl = function(url){        
        imageTestService.IsValidImageUrl(url);
    };

    $scope.back = function(){
        $scope.current = ($scope.current !== 0 ? $scope.current - 1 : 0);
    };

    $scope.next = function(){
        $scope.current = ($scope.current !== $scope.jsonData.length-1 ? $scope.current + 1 : $scope.jsonData.length-1);
    };

}]);

测试图像的服务：

app.service('imageTestService', function(){

    this.IsValidImageUrl = function(url){
        var img = new Image();
        img.onerror = function() { return false; };
        img.onload =  function() { return true; };
        img.src = url;
    };

});

HTML：

<div ng-if=IsValidImageUrl(jsonData[current].profilepic)>
    <img ng-model="jsonData[current].profilepic"/>
</div>
<div ng-if=!IsValidImageUrl(jsonData[current].profilepic)>
    <div>{{jsonData[current].firstName.charAt(1)+jsonData[current].lastName.charAt(1)}}</div>
</div>

但问题是jsonData[current].profilepic里面的ng-if条件在页面加载时不可用，即使json中存在图像，也显示不正确的结果。

JSON：

{
    "resultCareGivers": 
    [
        {
            "firstName":"aaa",
            "lastName":"bbb",
            "email":"bbb@mail.com",
            "profilepic":"http://via.placeholder.com/350x150",
        },
        {
            "firstName":"xxx",
            "lastName":"yyy",
            "email":"xxx@mail.com",
            "profilepic":"",
        }
    ]
}

我该如何解决这个问题？

Answer 1

您需要返回值

  $scope.IsValidImageUrl = function(url){        
       return  imageTestService.IsValidImageUrl(url);
  };

Answer 2

您的代码中存在两个问题

首先，您不会将任何内容返回到视图，还会检查是否有任何内容从服务返回

ng-model

其次，您使用ng-src来绑定图像。相反，您必须使用<div ng-if=IsValidImageUrl(jsonData[current].profilepic)> <img ng-src="{{jsonData[current].profilepic}}"/> </div>

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");

当图像不可用时，加载图像或显示字母

2 个答案: