单击角时评估或调用指令 [英] Evaluate or call directive on click in angular

问题描述

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

I am trying to load an image from json and if image is not available, then show firstname and lastname.

我有这样的控制器:

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);
    };

}]);

和验证图片加载的指令:

and a Directive to verify image loading:

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:

Html with attribute directive and next and back button to cycle through 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)

The problem is the directive works on page load and the image is loaded properly, but I when I navigate through json object to view details, the directive is not evaluated (I mean when there no image inside json, it should show firstName+lastName)

我该如何实现?

推荐答案

我认为您针对此用例编写的逻辑过于复杂.

I think you wrote the logic too complicated for this use case.

从服务器上获取的JSON简而言之，其中包含一些带有/不带有图片网址或图片网址损坏的数据.

In basic words JSON you get from Server contains some data with/without image URL or with broken image URL.

因此，要使HTML变得复杂，只需将JSON嵌入服务并将新的JSON带到您的控制器即可.

So instead to make HTML to be complicated, just embed your JSON in service and bring new JSON to your controller.

例如:

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应该如下所示:

So your HTML should look like:

<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>

不需要指令.

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

Since image validation can take some time, you can put default image (some kind of placeholder)

这篇关于单击角时评估或调用指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！