将编译后的dom转换为angularjs中的html代码

Question

我写了一个指令,它有一个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-example 会更容易，但我想我知道出了什么问题。你被控制台愚弄了 - 当你执行 console.log(s) 时，它不会立即被记录（它是异步的） - 控制台获得对 dom 元素 s[0] 的引用，并且当它被记录时准备打印角度已完成渲染。另一方面，s[0].outerHTML 和 s.html() 是同步的，因此您可以获得预角度渲染结果。要解决这个问题，你只需执行一个简单的 setTimeout 即可：

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

Angular 现在应该有时间在回调之前进行渲染（我认为您不需要延迟，但我可能是错的）。您还可以使用角度 $timeout-service ，它用 $scope.$apply 包装回调函数 - 请参阅http://docs.angularjs.org/api/ng.$timeout