指令鏈接功能不能訪問整個模板DOM

我有一個指令，它有一個遞歸包含模板的模板。在我的指令鏈接函數中，我無法使用選擇器獲取完整的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包含一個嵌套包含。這將創建的下拉列表中的多層次

<div class="{{elemClass}}"> 
    <script type="text/ng-template" id="node_template.html"> 
     <div class="ui dropdown" ng-if="option.options"> 
      <span ><i class="dropdown icon"></i> {{option.value}}</span> 
      <div class="menu" ng-if="data.options"> 
       <div class="item" ng-repeat="option in data.options" ng-include="'node_template.html'"></div> 
      </div> 
     </div> 
     <span ng-if="!option.options" ng-click="model=option">{{option}}</span> 
    </script> 

    <i class="dropdown icon"></i> 
    <div class="menu"> 
     <div class="item" ng-repeat="option in optionTree.options" ng-include="'node_template.html'"> 
     </div> 
    </div> 
</div>

我的問題是$（ELEM）.find（「ui.dropdown」）將不會被發現遞歸產生的div NG-包括

來源

2014-10-16 Dat Chu

通過試圖做的DOM在像這樣的指令的link（）方法中操作，你試圖查詢/修改尚未渲染的DOM的一部分。

您需要延遲這些jquery調用，直到晚些時候。您可以通過這樣做：

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

或

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

使用$evalAsync將在下$digest週期中運行的表情，將允許您之前它在瀏覽器的渲染HTML修改。使用$timeout將等到全部$digest週期完成。

來源

2014-10-16 21:19:55

指令鏈接功能不能訪問整個模板DOM

回答

相關問題