6

すべて、AngularJSを使用してWebアプリを開発しており、静的サーバーから完全なHTMLドキュメントを取得する必要があるユースケース/要件（これはあまり頻繁には発生しません）があります。ただし、$httpオブジェクトは生のHTML文字列を「データ」として返すようです。外部ライブラリ（たとえば、jQueryなど）の使用を避けようとしていますが、その生のHTML文字列をクエリ可能なDOMオブジェクトに解析する必要があります。iframeを使用してそれで済ますこともできますが、よく知られている理由からiframeの使用を避けようとしています。

したがって、問題は次のとおりです。AngularJSにはHTML用のパーサーがありますか（JSONの場合と同様）？それ以外の場合、このケースを処理するための最も優雅な方法は何ですか？

PS：AngularのAPIドキュメントをふるいにかけてみましたが、正直なところ、それらは行き当たりばったりで、ナビゲートするのが直感的ではありません。

4

2 に答える 2

12

プログラムで文字列からDOM要素を取得する必要がある場合、htmlをDOMオブジェクトに解析するのは非常に簡単です。

基本的には、DOMParserを使用します。

var parser = new DOMParser();
var doc = parser.parseFromString('<div>some html</div>', 'text/html');
doc.firstChild; //this is what you're after.

そこから、バニラJSを使用して要素を取得するためにクエリを実行する場合（つまり、何らかの理由でJQueryを使用したくない場合）、次のように実行できます。

//get all anchor tags with class "test" under a div.
var testAnchors = doc.firstChild.querySelectorAll('div a.test');

...ただし、注意：querySelectorAllIE8以降でのみサポートされています。

編集：追加のアプローチ...

「ラップ」メソッド：

var div = document.createElement('div');
div.innerHTML = '<div>some html</div>';
var result = div.childNodes;

...このメソッドにSVGまたはMathMLを入れると、このメソッドはHTMLUnknownElementsを返すことに注意してください。それらは正常に「見える」でしょうが、機能しません。

于 2012-10-30T15:46:59.417 に答える
3

まず第一に、AngularはjQueryも使用します。（jQuery lite）

FAQから

AngularはjQueryライブラリを使用しますか？

はい、アプリケーションがブートストラップされているときにアプリにjQueryが存在する場合、AngularはjQueryを使用できます。jQueryがスクリプトパスに存在しない場合、AngularはjQLiteと呼ばれるjQueryのサブセットの独自の実装にフォールバックします。

ただし、とにかくここでは完全なjQuery関数は必要ないと思います。

それが私がしたことです。

ディレクティブを使用してhtmlをテンプレートとして取得し、replaceをtrueに設定します。

jsFiddle

<myhtml></myhtml>

angular.module('myApp', []).directive('myhtml', function($http) {


    return {
        restrict: 'E',
        scope: {},
        template:'',
        link: function(scope, element, attrs) {
           $http.post('/echo/json/', data).success(function(re) {
               element.html(re.html);
        });
    }
    }
});

注を編集：

jsFiddleを更新するだけです。

jsFiddleでリクエストをエコーするためにjqueryを一番上に含めます。実際には、それは必要ありません。

ただし、AngularでjQueryを使用できることを示しています。

HTMLに角度タグが含まれていない場合、この例は期待どおりに機能するはずです。

それ以外の場合は、linkの代わりにcompileを使用する必要があります。

于 2012-10-30T14:46:30.850 に答える