Question

我也尝试用angular创建一个指令。我的目标是在我的指令的编译或链接功能中从我的html文件中获取原始内容。然后更新此内容，并使用我的指令模板中的更新内容完成原始内容的更改。

例如，这是我的index.html：

<my-directive> Hey this is my original content that I try to get! </my-directive>

这是我的指示：

        .directive('myDirective', function() {
        return {
            restrict: 'AE',
            transclude: false,               
            template: '{{UpdatedContent}}',
            compile: function(tElement, tAttr) {
                console.log(tElement[0]);
            },
             ...

问题在于，在我的编译功能或链接中，每次我尝试查看tElement对象时都无法获取原始内容，我得到“{{UpdatedContent}}”。

更新：答案

实际上解决方案是使用编译函数的函数transcludeFn。

这是一个工作的例子：

     compile: function(elem, attrs, transcludeFn) {
     var markdownContent = {};    
     transcludeFn(elem, function(clone) { 
     /* clone is element containing html that will be transcludded*/
        console.log (clone.text());   
                });

我的“clone.text（）”是我原来的html。我希望这会对你们中的一些人有所帮助!!

Answer 1

您应该设置transclude : true，不执行此操作：template: '{{UpdatedContent}}'。

如果你想获得你的指令放在链接函数中的元素的html，只需调用：

tElement.html()

顺便说一下。你总是得到{{UpdatedContent}}，因为你确实将它设置为你的模板。

更新工作PLNKR。

Angular：在我的指令中获取原始html内容的问题

1 个答案: