Javascript 如何从AngularJS指令中选择动态生成的元素？

在我的指令中，我需要选择某些DOM元素，其中一些是在ng repeat循环中动态生成的。如果我以一种简单的方式来做，我将只得到静态元素。但是，如果我将选择延迟500毫秒，我将获得所有元素，这就是我想要的

虽然这是可行的，但它并不是一个理想的解决方案，当然也不是最佳实践。一方面，您希望使超时尽可能短，但另一方面，您希望在选择之前确保DOM已准备就绪

是否存在在所有动态DOM就绪时触发的事件？从AngularJS指令中选择动态生成元素的推荐方法是什么

示例：

HTML:

---

这是一个简单的例子，你可以计算出来。 在我看来，此解决方案的唯一缺点是不能使用隔离作用域

html

<div data-ng-controller="MainController">
    <div outer-directive>
        <ul>
            <li ng-repeat="asset in assets" inner-directive>
                      {{asset}}
                      <input type="text" class="form-control">
            </li>
        </ul>
    </div>
</div>

或者更好

.directive('myParent', function ($timeout) {
        return {
            restrict: 'A', //attribute only
            controller: function ($scope, $element) { 
                this.isDone = function(){
                    var context = $element[0]; 
                    var availableFormElements = 'input,textarea';
                    var allFormElements = context.querySelectorAll(availableFormElements);
                    console.log(allFormElements);
                }
            }
        };
    })
    .directive('myChild', function ($timeout) {
        return {
            require:'^myParent',
            restrict: 'A', //attribute only
            link: function (scope, elem, attr, ctrl) {    

                if (scope.$last){
                    ctrl.isDone();
                }
            }
        };
    })

顺便说一句

---

不要触摸控制器中的dom:）

我想另一个问题可能是为什么选择这些元素？以一种更具角度性（i）的方式来做这件事将把这些类绑定到视图模型，视图模型将处理整个异步问题。。。为什么不把所有的指令内容都放在指令模板中，这样就可以一直使用它呢？总而言之，看一看，这似乎是一种有角度的方式，但这可能是一种更好的方法approach@Shomz：我希望保持指令的通用性和可重用性，而不是绑定到任何特定视图。

<div data-ng-controller="MainController">
    <div outer-directive>
        <ul>
            <li ng-repeat="asset in assets" inner-directive>
                      {{asset}}
                      <input type="text" class="form-control">
            </li>
        </ul>
    </div>
</div>

var app = angular.module('myApp', []);

app.controller('MainController',function($scope) {
    $scope.assets = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]; 
});

app.directive('outerDirective', function() {
  return {
    restrict: 'A',
    controller: function($scope) {

    }
  };
});
app.directive('innerDirective', function() {
  return {
    restrict: 'A',
    require: '^outerDirective',
    link: function(scope, elem, attrs,ctrl) {
        var context = elem[0]; 
        if (scope.$last){
            var availableFormElements = 'input,textarea';
            var allFormElements = context.querySelectorAll(availableFormElements);
            console.log(allFormElements);
        }
    }
  };
});

.directive('myParent', function ($timeout) {
        return {
            restrict: 'A', //attribute only
            controller: function ($scope, $element) { 
                this.isDone = function(){
                    var context = $element[0]; 
                    var availableFormElements = 'input,textarea';
                    var allFormElements = context.querySelectorAll(availableFormElements);
                    console.log(allFormElements);
                }
            }
        };
    })
    .directive('myChild', function ($timeout) {
        return {
            require:'^myParent',
            restrict: 'A', //attribute only
            link: function (scope, elem, attr, ctrl) {    

                if (scope.$last){
                    ctrl.isDone();
                }
            }
        };
    })