如何在AngularJS父指令中为ng-transclude嵌入的子指令设置id属性

错误原因 #

报错的核心原因是指令link函数执行的时机早于嵌入内容的DOM挂载流程：当link函数运行时，你写在模板里的<ng-transclude>节点要么还没插入到页面DOM树中，要么它内部的嵌入内容还没完成渲染，此时document.getElementById('transcluded_content')返回的是null，对null对象设置id属性就触发了这个类型错误。

解决方案 #

方案一（推荐）：使用transclude函数直接处理嵌入内容 #

不需要依赖DOM查询和定时器，直接在transclude回调中拿到嵌入的节点进行操作，可靠性更高，修改后的指令代码如下：

.directive('parentDirective', function ($rootScope, fileService) {
    return {
        transclude: true,
        restrict: 'E',
        scope: {
            disabled: "=?"
        },
        link: function (scope, element, attrs, ctrl, transclude) {
            transclude(function (transcludedNodes) {
                // 过滤文本节点，只保留元素节点
                const childDirectiveNode = transcludedNodes.filter(node => node.nodeType === 1)[0];
                if (childDirectiveNode) {
                    childDirectiveNode.id = 'myId';
                }
                // 将处理后的嵌入内容插入到指定容器
                element.find('.transclude-slot').append(childDirectiveNode);
            });
        },
        template: '<div><div class="transclude-slot"></div></div>'
    };
})

方案二（最小改动修复）：用$timeout延迟执行DOM操作 #

如果不想修改现有模板结构，可以注入$timeout将DOM操作延迟到下一轮事件循环，等DOM挂载完成后再执行，修改后的代码如下：

// 注意先注入$timeout依赖
.directive('parentDirective', function ($rootScope, fileService, $timeout) {
    return {
        transclude: true,
        restrict: 'E',
        scope: {
            disabled: "=?"
        },
        link: function (scope, element, attrs) {
            $timeout(function () {
                // 建议用指令本身的element查找，避免全局DOM查询冲突
                const transcludeEl = element.find('#transcluded_content')[0];
                if (transcludeEl?.firstElementChild) {
                    transcludeEl.firstElementChild.id = 'myId';
                }
            }, 0);
        },
        template: '<div><ng-transclude id="transcluded_content"></ng-transclude></div>'
    };
})

额外注意点 #

• 尽量避免使用全局的document.getElementById查找元素，使用指令自身的element方法查找只会匹配当前指令内部的节点，不会和页面其他部分的id冲突，安全性更高。
• 如果嵌入位置可能存在多个子元素，建议添加节点类型判断和标签名校验，避免给非预期的节点设置id。

内容的提问来源于stack exchange，提问作者henry bola