Question

有没有办法在不添加额外元素的情况下将某些内容转换为指令。

例如

指令：

{
    scope: {
        someParam: "="
    },
    link: function(scope, element, attrs){
        //do something
    },
    transclude: true,
    template:'<div ng-transclude></div>'
}

source html：

<div my-directive some-param="somethingFromController">
    my transcluded content: {{somethingElseFromController}}
</div>

通过此示例，将额外的div添加到标记中。通常情况下会没问题，但是我试图在表格中使用这个指令，所以添加一个div标签搞砸了。

我还尝试不指定transclude或template除去额外的div标签，但现在无法找到{{somethingElseFromController}}，因为“已转换”内容位于隔离范围内。我知道我可以从链接函数中的attrs对象获取我的指令的参数，而不是创建一个隔离的范围，但我宁愿避免需要用范围来计算字符串。$ apply（）。

任何人都知道如何做到这一点？谢谢！

Answer 1

@Vakey回答的是我在寻找的东西。

但就像今天一样，Angular文档说：

传递给compile功能的转让功能已弃用，例如不了解正确的外部范围。请使用传递给链接函数的transclude函数。

所以我使用了controller（暂时）及其$transclude函数，作为$compile documentation上显示的示例的一部分：

controller: function($scope, $element, $transclude) {
            var transcludedContent, transclusionScope;

            $transclude(function(clone, scope) {
                $element.append(clone);
                transcludedContent = clone;
                transclusionScope = scope;
            });
        },

Answer 2

这实际上可以用于Angular。诸如ng-repeat之类的指令就是这样做的。这是你如何做到的：

{
    restrict: 'A',
    transclude: true,
    compile: function (tElement, attrs, transclude) {
        return function ($scope) {
            transclude($scope, function (clone) {
                tElement.append(clone);
            });
        };
    }
};

那么这里发生了什么？在链接期间，我们只是将克隆（我们试图转换的元素）附加到指令的元素中。 Angular会将$ scope应用于clone元素，因此您可以在该元素内部执行所有角度优势。

Answer 3

详细说明@ rob的帖子......

Transclusion要求Angular创建一个元素，该元素是指令所依赖的任何标记的内容的克隆...如果内容是文本，它将把它包装在一个范围内。

这是一个DOM元素，可以在调用$ compile时应用范围。

所以，基本上，transclude会添加一个元素，原因与你不能$compile('plain text here {{wee}}')相同。

现在，您可以执行某些类似于$interpolate尝试的操作，它允许您将范围应用于字符串中的绑定，例如“blah {{foo}}”...但由于我真的不确定你要做什么，我真的不能给你一个具体的例子。

在AngularJS中转换而不添加新元素

3 个答案: