Javascript 更新DOM angularjs

我有一个控制器，它使用服务获取图像并构建DOM，如下所示：

<ul>
        <li ng-repeat="image in images">
            <img parentimageclick="{{ image.standard_resolution.url }}" ng-src={{image.thumbnail.url}} />
        </li>
</ul>

正如您所看到的，控制器的callChild被调用，它调用服务

$scope.callChild = function(data) {
    packImage.prepareSend(data);
}

服务代码是

    Products.factory('packImage',function($rootScope){

     var packImage = {};
     packImage.img = "";

      packImage.prepareSend = function(img) {
          this.img = img;
          this.Send();
      }

     packImage.Send = function(){
          $rootScope.$broadcast('takeimage');
     }

     return packImage;
    }); 

因此，基本上我使用此服务访问另一个控制器中单击的图像，如下所示

    Products.controller('PackCtrl',function($scope,packImage){

         var images = [];

         $scope.$on('takeimage', function() {
                       //console.log(packImage.img);
                       var data = {
                       url: packImage.img,
                       };

             images.push(data);
             $scope.images = images;
             $scope.$apply();
            });

   });

以上代码的问题是，它确实会在模型更新时填充dom，但我真正想要实现的是不同的。因为我的DOM保持不变

例如，我在dom中有一个硬代码列表，如下所示

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

    //Ten of them
  </ul>

//其中十个

所以我不能改变上面的结构，我需要一些功能，如果在控制器中获取图像，它需要找到空列表项并将其附加到那里。在列表完成之前，必须执行此操作

更新：

---

这应该是关于我想做什么的粗略演示？希望有一个角度的方法可以做到这一点。

@charlietfl我已经有了一个列表，即现在10个元素，每次我从其他控制器获得新图像时，我都需要找到空列表项并将图像放在其中。不明白为什么不能在其他列表上使用ng repeat。这个问题一点也不清楚。

DOM保持不变是什么意思？

在plunker或jsfiddle.net中演示您的情况会有所帮助如果您的指令

parentimageclick

所做的只是注册一个点击处理程序，只需在

img

元素中使用

ng click=callChild（image.缩略图.url）

。不，图像没有帮助…创建一个演示。任何人如何帮助您使用基于图像的代码。

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

    //Ten of them
  </ul>