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"
    }
}
});

Answer 2

找到一个新的解决方案。 Angular创建一个以指令内容命名的css类，如“ng-＆lt; directive＆gt; -content”，使用它可以访问使用它的指令内容。看看这个小提琴：

https://jsfiddle.net/manasisakhare/8ezh35to/2/

myapp.directive('foo', function () {
    return {
        restrict: 'E',
        //replace: true,
        transclude: true,
        template: '<div><p class="ng-foo-content" ng-transclude></p></div>'
    }
});

访问angular指令中的嵌套节点

2 个答案: