Javascript 指令链接函数无权访问整个模板DOM

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

这是我的指示。请注意，我的指令尝试在所有.ui.dropdown div上调用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。这将创建多个级别的下拉列表

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

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

---

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

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

您需要将这些jquery调用推迟到以后。您可以使用以下方法执行此操作：

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

或

使用

$evalAsync

将在下一个

$digest

周期中运行该表达式，这将允许您在HTML在浏览器中呈现之前对其进行修改。使用

$timeout

将等待所有

$digest

周期完成

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