javascript - 访问 Angular Directive(指令)中的嵌套节点

Question

我有以下 sudo html

<foo>
    <span>Bar</span>
</foo>

和指令:

myapp.directive('foo', function () {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        template: '<div><p>{{usedToBeInSpan}}</p></div>'
    }
});

如何提取嵌套 span 节点的内容并将其在指令范围内的内容设置为 usedToBeInSpan？

请注意，我实际上并没有使用它来替换嵌套标签，它只是一个简化的示例

Answer 1

您可以在指令中添加链接函数，如下所示:

myapp.directive('foo', function () {
return {
    restrict: 'E',
    replace: true,
    transclude: true,
    template: '<div><p>{{usedToBeInSpan}}</p></div>',
    link: function (scope, element, attrs) {
           // the element argument contains the html content inside the directive tags <foo></foo>
          scope.usedToBeInSpan = "";//populate from "element"
    }
}
});