Question

我正在尝试从json加载图像，如果图像不可用，则显示名字和姓氏。

我有这样的控制器：

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.data.resultCareGivers;
    });

    $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.directive('imageTestDirective', function($http){
   return {
       restrict: 'A',
       link: function($scope, elem, attrs){

           attrs.$observe('ngSrc', function(ngSrc){
                if(ngSrc != null && ngSrc != ""){
                    $http.get(ngSrc).then(function(success){
                      $scope.noImage = false;
                       console.log('success loading image', success);
                    }, function(error){
                        $scope.noImage = true;
                        console.log('error loading image', error);
                    });
                }
           });
       }
   }; 
});

带有属性指令的Html以及循环浏览json的下一步和后退按钮：

<img image-test-directive ng-show="noImage === false"  ng-src="{{jsonData[current].profilepic}}"  alt=""/>

<div ng-if="noImage">
    <div>{{jsonData[current].firstName.charAt(1)+jsonData[current].lastName.charAt(1)}}</div>
</div>

<div class="col-xs-12">
    <div class="col-xs-2">
        <button type="button" ng-click="back()">Back</button>
    </div>

    <div class="col-xs-6" style="text-align: right">
        <button type="button" ng-click="next()">Next</button>
    </div>
</div>

问题是该指令适用于页面加载并且图像正确加载，但是当我浏览json对象以查看详细信息时，该指令未被评估（我的意思是当json中没有图像时，它应该显示firstName +的lastName）

我如何实现它？

Answer 1

我认为你为这个用例写了太复杂的逻辑。

在基本的单词中，您从Server获得的JSON包含一些带/不带图像URL或图像URL损坏的数据。

因此，为了使HTML变得复杂，只需将JSON嵌入到服务中并将新的JSON引入控制器。

例如：

app.service('SomeService',['$q', /* ... */ function ($q /* ... */) {

    function MyNewJSON(origJSON){
      // check here if origJSON contains wrong image url 
      // and set new JSON key hasImage = true or false by validating it here in service and not in directive.
       this.hasImage = true;
       /* ... */
    }

    function getNewJSON(){
     return new MyNewJSON(origJSON); // it might be promise and you need resolve it in controller
    }

}]);

所以你的HTML应该是这样的：

<img ng-if="stateData.hasImage"  ng-src="stateData.profilepic"  alt=""/>

<div ng-if="!stateData.hasImage">
    <div >{{stateData.firstName.charAt(1)+stateData.lastName.charAt(1)}}</div>
</div>

不需要指令。

由于图像验证可能需要一些时间，因此您可以放置默认图像（某种占位符）

单击角度评估或调用指令

1 个答案: