獲取JavaScript引用在ng-repeat中創建的元素

Question

我試圖獲得在ng-repeat中創建的<div>，以便我可以在由第三方庫生成的內容中添加內容。

嘗試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始終爲空或未定義。怎麼了？

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/。

Answer 2

正如已經指出的那樣，您的函數在渲染完成之前運行。但是，如同@anied所提到的那樣，讓DOM操作符合指令。這樣，您可以將其與控制器分離，並且可以輕鬆地重新使用它。

plunker參見

標記：

<div ng-repeat="item in items" data-generated="item"></div> 

指令：

app.directive('generated', ['$compile', function($compile) { 
    var generateInnerHtml = function(e) { 
    e.innerHTML = '<pre>item = {{vm.item}}</pre>' 
    }; 
    return { 
    restrict: 'AE', 
    scope: { 
     item: '=generated' 
    }, 
    controllerAs: 'vm', 
    bindToController: true, 
    controller: [function() { 
    }], 
    compile: function(element, attr) { 
     generateInnerHtml(element[0]); 
     return function(scope, element, attr) { 
     // Only do this if you need access to scope variables 
     $compile(element.contents())(scope); 
     } 
    } 
    }; 
}]);