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（＆＃34; .ui.dropdown＆＃34;）将无法通过ng-include

找到递归生成的div

Answer 1

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

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

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

或

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

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

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

1 个答案: