Javascript 角度-接头阵列内部指令（如果src错误）

我需要删除项目，并推动下一步内ng重复，如果图像不存在

目前我正在使用下一个指令

myApp.directive("noImage", function() {
  return {
    link: function(scope, element, attrs) {
      return element.bind("error", function() {
        element.attr("src", attrs.noImage);
        return element.addClass('no-img');
        //return element.parent().remove();
        //return element.parent().splice();
      });
    }
  };
});

显然，如果使用

element.parent（）.remove（）

或

splice（）

它不会将下一项推送到数组中

这是

另一个想法是在控制器中写入函数，然后从指令运行它：

$scope.splicePost = (post) =>
  $scope.posts.splice( $scope.posts.indexOf(post), 1 )

---

问题是我不知道怎么做。可能需要使用隔离作用域？

是的，如果正确，则需要将数组传递到指令中，如果无法加载映像，则可以从数组中进行拼接。使用“=”在隔离作用域中传递它，这样就有了双向绑定

如果发生错误，则不执行任何操作

更新： 代码：

html将变成：

<div ng-controller="MyCtrl">
  <ul>
     <li ng-repeat = 'post in posts | limitTo: 5'>
         <img posts="posts" ng-src = "{{post.image_url}}" no-image = "" />

     </li>
  </ul> 
</div>

ng repeat

为中继器中的每个项目创建子范围

这意味着在指令中，您将继承父作用域数组，并对每个post项都有权访问

scope.post

myApp.directive("noImage", function () {
    return {
        link: function (scope, element, attrs) {
            element.bind("error", function () {
                // get index of post in the posts array
                var idx = scope.posts.indexOf(scope.post);
                scope.$apply(function () {
                    // splice posts array
                    scope.posts.splice(idx, 1);
                });
            });
        }
    };
});

由于事件不在angular core范围内，您需要告诉angular在作用域更改时运行摘要，这是使用

$apply

或

$timeout

为了使其更可重用，最好创建隔离作用域，并将post项和post数组传递给隔离作用域

---

我更愿意在组件中思考，这意味着您可以创建一个名为

图像块的组件，该组件具有您以前在标记中使用的模板。您现在的标记可能如下所示：

<div ng-controller="MyCtrl as vm">
  <image-block images="vm.posts" url-property="image_url"></image-block>
</div>

myApp.directive("isImage", function() {
  return {
    scope: {
        image: '=isImage'    
    },
    require: '^imageBlock',
    link: function(scope, element, attrs, ctrl) {
      return element.bind("error", function() {
         scope.$apply(ctrl.removeImage(scope.image));
      });
    }
  };
});

该组件有自己的逻辑控制器，这也是
isImage
指令所要求的。此指令将捕获
错误
事件，并调用父控制器的
removeImage
函数

isImage
指令如下所示：

<div ng-controller="MyCtrl as vm">
  <image-block images="vm.posts" url-property="image_url"></image-block>
</div>

myApp.directive("isImage", function() {
  return {
    scope: {
        image: '=isImage'    
    },
    require: '^imageBlock',
    link: function(scope, element, attrs, ctrl) {
      return element.bind("error", function() {
         scope.$apply(ctrl.removeImage(scope.image));
      });
    }
  };
});

唯一的作用域属性是映像，它将传递给父控制器以从列表中删除映像

这是您的最新版本。就我个人而言，我发现组件中的思维方式非常有用，它有助于将逻辑和UI分解为更小的部分。
谢谢。你能看看这个问题吗（它与这个问题有关）