8

我写了一个指令，它有一个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 代码的正确方法是什么？

4

1 回答 1

4

如果你能提供一个 plunkr / jsFiddle-example 会更容易，但我想我知道出了什么问题。您被控制台愚弄了-当您执行console.log（s）时，它不会立即记录（它是异步的）-控制台获取对dom元素s [0]的引用，并且到了准备打印角度完成了它的渲染。另一方面， s[0].outerHTML 和 s.html() 是同步的，所以你得到了预角渲染的结果。要解决这个问题，你可以做一个简单的 setTimeout：

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

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

于 2013-04-10T07:00:55.470 回答