Question

嗨，我是angularjs的新用户，如果特定的产品图片未能加载到product代码中，我试图获取product或<img> ID的名称，以便我可以使用product Id来做一些事情，但是如何在图片加载失败时获取特定的产品ID或名称，

我在这里使用指令，我试图在指令链接功能

中获取该productId

控制器

angular.module('myApp').controller("myCtrl",function($scope){
scope.products=[
               { productName:"Mobile",
                 productImage:"someImage.jpg",
                 productId: 1              
               },
                { productName:"wallet",
                 productImage:"someImage22.jpg",
                 productId: 2              
               },
                { productName:"headphones",
                 productImage:"image3.jpg",
                 productId: 3              
               }
              ]
});

index.html
---------
<div ng-repeat="products in products">
    <my-directive data="products"><my-directive>
</div>

这是我的指示

.directive('myDirective',function($state){
return{
  restrict:'E',
  scope:{
    data:'='
  },
  templateUrl:'template.html',
  link: function(scope,elem,attr){
    var image = document.getElementById('imageId');
     image.onerror=function(){
       console.log("image loading error") // here console is also not printing.
       console.log("product ID") // here i want error loding image productId.
      }
  }
}
});

这是我的template.html

<div>
<h2>{{data.productName}}</h2>

<a href="example.com"><img id="imageId" src="{{data.productImage}}"> </a>
</div>

Answer 1

我-directive.js

angular.module('myApp') .directive("myDirective", function() { return { restrict: "E", templateUrl: 'my-directive.html', scope: { data: '=' } }; }) .directive('checkImg', function() { return { restrict: 'EA', link: function(scope, element, attrs) { element.bind('error', function($event) { console.log(JSON.parse(attrs.name)); // Here is your product }); } } });

我-directive.html

<div> <h2>{{data.productName}}</h2> <img ng-src="{{data.productImage}}" name="{{data}}" check-img> </div>

在您的情况下，传递data(product)的角度数据是不可能的。 onerror正在调用一个外角的函数。所以，我们得到了这个错误。我们只能传递onerror="fun(event)"中的事件，除此之外我们无法传递任何内容。在上面的代码中，属性名称仅用于保存产品数据。您也可以将该产品数据存储在另一个属性中。

Answer 2

嗨我在错误时使用此指令：

angular
    .module("myappName")
    .directive('errSrc', function () {
    return {
        link: function(scope, element, attrs) {
            element.bind('error', function() {
                console.log(attrs);
               // here you can catch the error of image
            });
        }
    };
});

并使用它：

<img data-ng-src={{mysrc}} err-src />

如果图像是错误的，我们如何获得错误图像的productName或productId

控制器

这是我的指示

这是我的template.html

2 个答案: