指令链接功能无法访问整个模板 DOM答案

【问题标题】：Directive link function does not have access to the entire template DOM指令链接功能无法访问整个模板 DOM
【发布时间】：2014-10-16 20:53:20
【问题描述】：

我有一个指令，它有一个递归包含模板的模板。在我的指令链接函数中，我无法使用选择器获取完整的 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") 找不到 ng-include 递归生成的 div

【问题讨论】：

标签： javascript jquery angularjs angularjs-directive

【解决方案1】：

通过像这样尝试在指令的 link() 方法中进行 DOM 操作，您正在尝试查询/修改尚未渲染的 DOM 部分。

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

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

或

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

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

【讨论】：