angularjs - 在angularjs中将编译的dom转换为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] 的引用，并且到了它的时候准备打印 angular 已经完成了它的渲染。另一方面， s[0].outerHTML 和 s.html() 是同步的，所以你会得到预先 Angular 渲染的结果。要解决此问题，您只需执行一个简单的 setTimeout:

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

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