转换编译DOM在angularjs HTML代码(Convert compiled dom to h

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

我的代码是：

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 。 并在控制台，它输出：

你可以看到console.log(s)和console.log(s[0])有很多的信息，但是当我使用outerHTML ，内按钮全部丢失。

我也试着使用jquery： jQuery(s[0]).html()但同样的事情发生。

什么是转换的正确方法s到HTML代码？

Answer 1:

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

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

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

文章来源: Convert compiled dom to html code in angularjs