转换编译DOM在angularjs HTML code [英] Convert compiled dom to html code in angularjs

问题描述

我写了有一个 postLink 指令，我整理了一些HTML code和angularjs渲染。但问题是我无法从生成的DOM获得HTML code。

I wrote a directive which has a postLink, and I compiled some html code and render it by angularjs. But the problem is I can't get the html code from the generated DOM.

我的code是：

app.directive("showResultAsText", ['$compile', function ($compile) {
    return {
        restrict: 'A',
         compile: function compile(tElement, tAttrs, transclude) {
            console.log('compile');
            var watchModal = tAttrs["showResultAsText"];
            var elem = jQuery(tElement);
            var oriHtml = elem.html();
            elem.empty();
            return {
                post: function postLink(scope, iElement, iAttrs, controller) {
                    scope.$watch(function () {
                        return scope.$eval(watchModal);
                    }, function (newVal) {
                        if (newVal) {
                            var s = $compile(angular.element(oriHtml))(scope);
                            console.log(s);
                            console.log(s[0]);
                            console.log(s[0].outerHTML);
                            console.log($('<div>').append(s[0]).html());
                            iElement.text(s[0].outerHTML);
                        }
                    });
                }
            }
        }
    }
}

您可以看到我用的console.log 打印的值S 。并在控制台，它输出：

You can see I used console.log to print the value of s. And in the console, it outputs:

您可以看到的console.log（S）和的console.log（S [0]）有很多信息，但是当我使用 outerHTML ，内层按键都丢失了。

You can see console.log(s) and console.log(s[0]) have many information, but when I use outerHTML, the inner buttons are all missing.

我也试着使用jQuery：的jQuery（S [0]）HTML（），但同样的事情发生。

I also tried to use jquery: jQuery(s[0]).html(), but the same happened.

那是什么转换的正确方法小号为HTML code？

What is the correct way of convert that s to html code?

推荐答案

这将会是如果你能提供一个plunkr /的jsfiddle，例如容易，但我想我知道什么是错的。你要通过控制台骗了 - 当你你CONSOLE.LOG（S），它不会立即记录（它的异步） - 控制台获取到DOM元素S [0]，并通过一次，它是一个参考准备打印角度与它的渲染完成。在另一方面，S [0] .outerHTML和s.html（）是同步的，所以您获得了pre-角度呈现的结果。为了解决这个问题，你可以只是做一个简单的setTimeout：

It'd be easier if you could provide a plunkr / jsFiddle-example, but I think I know what's wrong. You're getting fooled by the console - when you you do console.log(s) it doesn't get logged immediately (it's async) - the console gets a reference to the dom element s[0], and by the time it's ready to print angular is done with it's rendering. On the other hand, s[0].outerHTML and s.html() are synchronous, so you get the pre-angular rendered result. To fix this you could just do a simple setTimeout:

setTimeout(function(){ console.log(s[0].outerHTML); });

角现在应该有时间做它的回调之前渲染（我不认为你需要一个延迟，但我可能是错的）。您还可以使用角度$超时服务进行包装$范围回调函数$应用 - 见的 http://docs.angularjs.org/api/ng.$timeout

这篇关于转换编译DOM在angularjs HTML code的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！