如何通过动态选择器查询Angularjs指令嵌套的DOM元素？

Question

父模板中指令分配：使用指令$id动态ID的
注意分配：

<div badge></div> 

指令模板templates/badge.html。

<div> 
    <span id="id{{ ::$id }}_name">Nik Sumeiko, Frontend engineer</span> 
</div> 

指令：

angular.module('app').directive('badge',() => ({ 
    restrict: "A", 
    replace: true, 
    templateUrl: "templates/badge.html", 
    link: (scope, element, attributes) => { 

    // Tries to query nested DOM element by a dynamic selector. 
    const name = element.find(`#id${scope.$id}_name`); 

    console.log(name.length, element.html()); 
    } 
})); 

基于控制台输出它清楚地看到，指令模板没有编译它的动态值：不过它可能那么如何

0 " 
    <div> 
     <span id="id{{ ::$id }}_name">Nik Sumeiko, Frontend engineer</span> 
    </div> 
" 

通过动态选择器查询嵌套元素？在Angular呈现模板的动态值之后是否还有其他指令方法？

请不要建议使用$timeout注入功能，延缓里面link方法模板渲染，因为我不认为这是正确的方式...

Answer 1

这里距角documentation报价：

链接后，视图不会更新，直到调用$ digest，这通常是由Angular自动完成的。

这就是为什么你无法在其id中找到包含表达式的元素 - 当时没有更新视图。

这里的变通办法：

创建元素，并将其附加到DOM手动

这种方式，你必须元素的引用，所以你不必查询它：

link: (scope, element, attributes) => { 
    let span = $compile('<span id="id{{ ::$id }}_name">Nik Sumeiko, Frontend engineer</span>')(scope); 
    // do something to span ... 
    element.append(span); 
} 

使用$超时

您可以ü se $timeout零延迟，它不是错误的方式。 $timeout将在当前的$digest周期之后执行您的代码，这意味着视图绑定更新后：

link: (scope, element, attributes) => { 
    $timeout(function() { 
     let span = element[0].querySelector(`#id${scope.$id}_name`); 
    }); 
}