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

Question

我有一个指令，它有一个递归包含模板的模板。在我的指令链接函数中，我无法使用选择器获得完整的 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。这会创建多个级别的下拉菜单

<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

Answer 1

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

您需要将那些 jquery 调用推迟到以后。您可以使用:

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

或

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

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