Javascript 从其父元素访问由ng repeat填充的元素的方法

好的，为了简单起见，假设我有一个名为

headSlides

的指令。该指令的模板是一个图像，由

ng repeat

重复几次：

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

我想从指令代码中访问那些图像元素。但是当应用程序启动并且指令的代码块运行时，图像还没有创建，所以不能使用类似

element.find（“img”）

等的东西

到目前为止，我一直在使用两种变通方法：

在指令中使用

$timeout（init，0）

，其中

init

是一个函数，我将与图像交互所需的所有代码放在该函数中

添加另一个指令，但这一次添加到图像本身，并使用它们的

load

事件向它们的父指令发出“通知”（当然，还要为emit事件向父指令添加一个侦听器）

---

我认为应该有更简单、更直观的方法来做到这一点。所以我的问题是，你将如何处理这样的任务

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

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

指令（'headSlides'，函数（）{ 返回{ 限制：“A”， 模板：“” } }); 我建议尝试在您的指令中使用独立范围的功能

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

指令（'headSlides'，函数（）{ 返回{ 限制：“A”， 模板：“”， 范围：{ images:'='//主控制器中映像数组的双向绑定 } } }); 我不知道您使用的是什么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>

//我的控制器
$scope.images=[
{“name”：“puppy1”，“src”：“img/puppy1.jpg”}，
{“name”：“puppy2”，“src”：“img/puppy2.jpg”}
];
//我的HTML

---

编辑：为了澄清，之所以这样做是因为“=”在指令的独立范围内。由于双向绑定，指令将知道主控制器中的映像数组何时更改。因此，在js脚本仍在加载的前几毫秒内，图像数组可能会被视为未定义或为空。但是，一旦图像数组初始化，指令就会工作，并且图像将显示，而无需使用$timeout

您的指令方法听起来不错。但与其发出事件，不如传入回调函数？类似于

my on load=“loaded（image）”

没有“通用方法”，因为它比您想象的要复杂得多。待回答的问题：-如果将新图像添加到列表中/删除旧图像/图像url更改，会发生什么情况？-如果一个/多个图像无法加载，该怎么办？谢谢您的回复，但它与所问问题几乎没有共同之处。这不是简单地创建一个用于显示一组图像的指令的问题，使用隔离作用域或双向绑定，我想找出从指令代码块级别的模板访问每个

图像对象的最佳方法。。。我想我必须更新我的问题，使之更加具体。