Question

好吧，为了简单起见，让我说我有一个名为headSlides的指令。该指令的模板是ng-repeat重复几次的图像：

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

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

因此，到目前为止，我一直在使用两种解决方法：

在指令中使用$timeout(init,0)，其中init是一个函数，其中我放置了与图像交互所需的所有代码;
添加另一个指令，但这次是对图像本身并使用他们的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>

编辑：为了澄清，其工作原因是因为指令的隔离范围中的'='。由于双向绑定，您的指令将知道主控制器中图像阵列何时发生变化。因此，在仍然加载js脚本的前几个ms中，您的图像数组可能被视为未定义或为空。但是一旦你的图像数组被初始化，该指令就会工作，图像将显示而不必使用$ timeout

如何从父级

1 个答案: