javascript - 获取对在 ng-repeat 中创建的元素的 JavaScript 引用

Question

我正在尝试获取 <div>在 ng-repeat 内创建这样我就可以在里面添加由第三方库生成的内容。

尝试 1:

<div ng-init="init()">
  <div ng-repeat="item in items">
    <div id="{{ item.id }}"></div>
  </div>
</div>

$scope.init = function() {
  for (var i in items) {
    var element = document.getElementById(items[i].id);
    generateInnerHtml(element);
  }
};

尝试 2:

<div ng-init="init()">
  <div ng-repeat="item in items">
    <div id="{{ item.id }}" ng-init="addContent(item.id)"></div>
  </div>
</div>

$scope.addContent = function(id) {
  var element = document.getElementById(id);
  generateInnerHtml(element);
};

尝试 3:

<div ng-init="init()">
  <div ng-repeat="item in items">
    <div id="{{ item.id }}" ng-init="addContent(this)"></div>
  </div>
</div>

$scope.addContent = function(element) {
  generateInnerHtml(element);
};

对于所有三次尝试，element始终为 null 或未定义。怎么了？

Answer 1

在尝试 #1 和 #2 中，您的函数在处理所有 Angular 指令之前运行，因此 div 的 id 尚未定义。

您可以将您的代码包装在 $timeout() 中以强制它等待，直到正确生成 DOM:

angular.module("myApp", [])
  .controller("myController", function($scope, $timeout) {
    $scope.addContent = function(id) {
      $timeout(function() {
        var element = document.getElementById(id);
        generateInnerHtml(element);
      }, 0);
    };

})

在此处查看演示:https://jsfiddle.net/1w5ntajm/ .