如何從AngularJS指令中選擇動態生成的元素？

Question

在我的指令中，我需要選擇某些DOM元素，其中一些是在ng-repeat循環中動態生成的。如果我以直截了當的方式來做，我只會得到靜態元素。但是，如果我延遲選擇，例如500毫秒，我將獲得所有元素，這正是我想要的。

雖然這有效，但它不是一個理想的解決方案，而且當然也不是最佳實踐。一方面，您希望儘可能縮短超時時間，但另一方面，您希望在選擇之前確保DOM已準備就緒。

當所有動態DOM準備就緒時，是否有事件觸發？從AngularJS指令中選擇動態生成的元素的推薦方法是什麼？

例：

HTML：

<div data-my-directive> 
    <div class="modal-body">       
     <label data-localize>type:</label>&nbsp; 
     <select class="form-control" ng-model="assetFilter.appCode" ng-change="loadassets(assetFilter.appCode)" ng-options="type.code as type.name for type in types"></select> 

      <table class="table table-default" ng-show="hasLoaded"> 
       <tbody ng-repeat="asset in assets | filter:assetFilter | orderBy:'assetKey':false"> 
       <tr> 
        <td> 
         <div class="container-fluid"> 
          <div class="row vert-align"> 
           <div class="col-sm-4"> 
            {{asset.assetKey}} 
           </div> 
           <div class="col-sm-8" style="height:100%"> 
            <input ng-hide="asset.assetKey.length >= 80" type="text" class="form-control" ng-model="asset.assetValue" ng-change="asset.isModified=true"> 
            <textarea ng-show="asset.assetKey.length > 80" class="form-control" ng-model="asset.assetValue" ng-change="asset.isModified=true"></textarea> 
           </div> 
          </div> 
         </div> 
        </td> 
       </tr> 
      </tbody> 
     </table> 

    </div> 
    <div class="modal-footer"> 
     <button class="btn btn-primary" ng-click="save(saveassets, $event)" ng-disabled="!(assets | anyModified)" data-localize>Save</button> 
     <button class="btn btn-warning" ng-click="close($event)" data-localize>Close</button> 
    </div> 
</div> 

指令：

myApp.directive('myDirective', function ($timeout) { 
    return { 
     restrict: 'A', //attribute only 
     link: function (scope, elem, attr, ctrl) {  
      var context = elem[0]; 
      var availableFormElements = 'input:not([disabled]):not([class*=ng-hide]),' + 
       'select:not([disabled]):not([class*=ng-hide]), textarea:not([disabled]):not([class*=ng-hide]),' + 
       'button:not([disabled]):not([class*=ng-hide]),' + 
       '*[class*=btn]:not([disabled]):not([class*=ng-hide])'; 

      var allFormElements = context.querySelectorAll(availableFormElements); 
      // Will only get static elements, nothing from ng-repeat loop 

      $timeout(function() { 
       allFormElements = context.querySelectorAll(availableFormElements); 
       // Will include all elements, also from ng-repeat loop 
      }, 500);  

      // Code to manipulate selected form elements 

    }; 
}); 

Answer 1

這是一個簡單的例子，你如何可以工作了。 Imo該解決方案的唯一缺點是不能使用隔離範圍。

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> 

JS

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(); 
       } 
      } 
     }; 
    }) 

BTW 不要觸摸控制器中的dom :)