指令链接function无权访问整个模板DOM

我有一个指令，其中有一个递归包含模板的模板。 在我的指令链接函数中，我无法使用选择器获取完整的DOM。

这是我的指示。 请注意，我的指令尝试在所有.ui.dropdown div上调用dropdown（）函数，因此将激活嵌套下拉列表。

.directive("floatingDropdown", function() { return { restrict: 'E', templateUrl: "scripts/Ui/FloatingDropdown.html", replace: true, scope: { uiClass: '@', model: '=ngModel', optionTree: '=' }, link: function(scope, elem, attrs) { scope.elemClass = scope.uiClass || "ui floating dropdown icon button"; $(elem).dropdown(); $(elem).find(".ui.dropdown").dropdown(); } } }) 

scripts / Ui / FloatingDropdown.html包含嵌套的include。 这会产生多个级别的下拉菜单

 
  
  {{option.value}} 
 
 
 
 {{option}}   
 
 
 
  

我的问题是$（elem）.find（“。ui.dropdown”）将无法通过ng-include找到递归生成的div

Answer 1

通过尝试在指令的link（）方法中执行DOM操作，您尝试查询/修改尚未呈现的DOM的一部分。

您需要将这些jquery调用推迟到以后。 你可以这样做：

 $scope.$evalAsync(function() { // DOM code }); 

要么

 $timeout(function() { // DOM code }, 0); 

使用$evalAsync将在下一个$digest循环期间运行表达式，允许您在浏览器中呈现之前修改HTML。 使用$timeout将等到所有 $digest周期完成。