javascript - 从父级访问由 ng-repeat 填充的元素的方法

Question

好吧，为了简单起见，假设我有一些名为 headSlides 的指令。该指令的模板是由几个 ng-repeat 重复的图像次数:

<img class="bg" ng-repeat="image in images" ng-src="{{image.src}}">

我想从指令代码中访问这些图像元素。但是当应用程序启动并且指令的代码块运行时 - 图像尚未创建，因此您不能使用 element.find("img") 等。

所以，到目前为止我一直在使用两种解决方法:

1. 在指令内使用 $timeout(init,0)，其中 init 是一个函数，我在其中放置了与图像交互所需的所有代码；
2. 添加另一个指令，但这次是图像本身，并使用它们的 load 事件向其父指令发出“通知”(当然，还为父指令添加一个监听器以接收发出事件) .

我相信应该有更简单、更直观的方法来做到这一点。所以我的问题是你将如何完成这样的任务？

Answer 1

根据您的描述，您的指令如下所示:

.directive('headSlides', function () {
    return {
        restrict: 'A',
        template: '<img class="bg" ng-repeat="image in images track by $index" ng-src="{{image.src}}">'
    }
});

我建议尝试在您的指令中利用隔离作用域的力量。

.directive('headSlides', function () {
    return {
        restrict: 'A',
        template: '<img class="bg" ng-repeat="image in images track by $index" ng-src="{{image.src}}">',
        scope: {
            images: '=' //two way binding on the image array in your main controller
        }
    }
});

我不知道你正在使用什么 init 函数，但我测试了这个指令没有任何问题。这是我的其余代码:

//My Controller    
  $scope.images = [
      {"name" : "puppy1", "src": "img/puppy1.jpg"},
      {"name" : "puppy2", "src": "img/puppy2.jpg"}
  ];

//My HTML
  <div head-slides images="images"></div>

编辑:为了澄清，它起作用的原因是因为指令的隔离范围中的“=”。由于双向绑定(bind)，您的指令将知道主 Controller 中的图像数组何时发生变化。因此，在 js 脚本仍在加载的最初几毫秒内，您的图像数组可能会被视为未定义或为空。但是，一旦图像数组初始化，该指令就会起作用并且图像将显示，而无需使用 $timeout