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() は同期的であるため、Angular レンダリング前の結果が得られます。これを修正するには、単純な setTimeout を実行するだけです:

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

Angular には、コールバックの前にレンダリングを行う時間があるはずです (遅延は必要ないと思いますが、間違っている可能性があります)。コールバック関数を $scope.$apply でラップする angular $timeout-service を使用することもできます - http://docs.angularjs.org/api/ng.$timeoutを参照してください

于 2013-04-10T07:00:55.470 に答える