指令链接函数无法访问整个模板 DOM [英] Directive link function does not have access to the entire template DOM

问题描述

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

这是我的指令.请注意，我的指令尝试在构造的所有 .ui.dropdown div 上调用 dropdown() 函数，以便激活嵌套下拉列表.

.directive("floatingDropdown", function() {返回 {限制:'E'，templateUrl: "scripts/Ui/FloatingDropdown.html",替换:真的，范围: {uiClass: '@',模型:'=ngModel'，选项树:'='},链接:功能(范围，元素，属性){scope.elemClass = scope.uiClass ||"ui 浮动下拉图标按钮";$(elem).dropdown();$(elem).find(".ui.dropdown").dropdown();}}})

scripts/Ui/FloatingDropdown.html 包含一个嵌套的包含.这会创建多级下拉菜单

<script type="text/ng-template" id="node_template.html"><div class="ui dropdown" ng-if="option.options"><span ><i class="下拉图标"></i>{{option.value}}</span><div class="menu" ng-if="data.options"><div class="item" ng-repeat="options in data.options" ng-include="'node_template.html'"></div>

<span ng-if="!option.options" ng-click="model=option">{{option}}</span><i class="下拉图标"></i><div class="菜单"><div class="item" ng-repeat="optionTree.options 中的选项" ng-include="'node_template.html'">

我的问题是 $(elem).find(".ui.dropdown") 找不到通过 ng-include 递归生成的 div

解决方案

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

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

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

或

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

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

I have a directive which has a template that recursively include a template. In my directive link function, I am unable to get the complete DOM with a selector.

Here is my directive. Notice that my directive try to call dropdown() function on all .ui.dropdown divs constructed so nested dropdown will be activated.

.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();
        }
    }
})

The scripts/Ui/FloatingDropdown.html contains a nested include. This creates multiple levels of dropdowns

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

My problem is $(elem).find(".ui.dropdown") will not find the recursively generated divs by ng-include

解决方案

By attempting to do DOM manipulation in a directive's link() method like that, you're trying to query/modify a part of the DOM that hasn't been rendered yet.

You need to defer those jquery calls until later. You can do this using:

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

or

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

Using $evalAsync will run the expression during the next $digest cycle, will allow you to modify HTML before it's rendered in the browser. Using $timeout will wait until all $digest cycles are complete.

这篇关于指令链接函数无法访问整个模板 DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！