2

データベースからコンテンツをビューに直接ロードしています。それをコンパイルして、Angular コードが標準テンプレートを介してロードされたかのように実行されるようにしたいと考えています。

私がよく理解していないのは、データベースからロードしている HTML をどのようにコンパイルできるかということです。$compile を使用しようとすると、常に indexOf の問題でエラーが発生します。

Error: [$parse:lexerr] Lexer Error: Unexpected next character  at columns 1415-1415 [#] 
in expression [<p>Introducing XXX featuring Something great. Along with the already famous World <strong>Approach</strong>….

他のコメントからわかるように、 $compile は既存の DOM 要素でのみ機能するようですが、私の場合、新しい SCE のものにより、Angular コードを削除せずに html をビューに入れるのが非常に難しくなります。私が考えることができる唯一のことは、コンテンツが変更されるたびに何らかの形で時計を使用してコンパイルすることですか? これは、何らかの方法でディレクティブを介して行うことができますか?

この plunker は、SCE と、Angular コード (ng-click など) を削除せずに HTML をビューに取り込む方法を示しています。http://plnkr.co/edit/C0ij2j2NxGZl6NaOdW8c?p=preview . を使用する 2 番目の例を見てくださいsce.trustAsHtml()。これを拡張してコードをコンパイルして動作させるにはどうすればよいng-clickですか?

前もって感謝します。

4

1 に答える 1

7

コンテンツ自体をコンパイルすれば、SCE について心配する必要がないことがわかりました。そのため、ng-bind-html の代わりに、$compile ( http://docs.angularjs.org/api/ng .$compile) にある正確なディレクティブを使用して HTML を配置し、同時にコンパイルします。

コンパイルされたコンテンツを表示するには:

<div compile="content.description"></div>それ以外の<div ng-bind-html="content.description"></div>

.directive('compile', function($compile) {
// directive factory creates a link function
return function(scope, element, attrs) {
    scope.$watch(
        function(scope) {
             // watch the 'compile' expression for changes
            return scope.$eval(attrs.compile);
        },
        function(value) {
            // when the 'compile' expression changes
            // assign it into the current DOM
            element.html(value);

            // compile the new DOM and link it to the current
            // scope.
            // NOTE: we only compile .childNodes so that
            // we don't get into infinite loop compiling ourselves
            $compile(element.contents())(scope);
        }
    );
};
});
于 2013-09-06T21:39:30.457 に答える