0

私はAngularJSを初めて使用します。誰かが私の頭を動かすのを手伝ってくれることを願っています！

HTMLコンテンツのページを動的に取り込むWeb電子書籍リーダーを開発しています。これまでのところ、私は$ http AJAX呼び出しでそれを行い、それを'ng-bind-html-unsafe'でバインドしています（HTMLは私たち自身のものであり、同じサーバー上のディレクトリから提供されるだけです。私はHTMLなので、必要に応じてこれを別の方法で行うことができます）。したがって、ユーザーが前/次を押すたびに、コントローラーはHTMLの前/次のページをフェッチし、モデル内でそれを切り替えます。これはうまく機能します。

しかし次に、コメントやハイライトなどのユーザー追加でこのダイナミックHTMLを拡張する必要があります。それらは、ユーザーが追加した場所に表示する必要があります。たとえば、コメントは特定の段落の下にある可能性があります。

JQueryを使用すると、各HTML要素に独自のIDを割り当て、ユーザー生成コンテンツの各ビットを特定のIDに関連付けると思います。次に、DOMを自分で操作できます。たとえば、関連する要素の下に各コメントを追加します。

原則は直接のDOM操作を完全に回避することであると思われるため、AngularJSの正しいアプローチは何ですか？

HTMLコンテンツをモデル内の個別の要素として定義し、段落、ヘッダー、画像などごとに個別のJavaScriptオブジェクトを設定することで、どのように実行できるかがわかりました。しかし、基本的にはJavaScriptでDOMのようなデータを定義することになります。かなり間違っていて散らかっています...

4

1 に答える 1

0

「ng-include」を使用して、コントローラーからsrc属性を動的にバインドします。動的なユーザー生成コンテンツを追加することは、HTMLにバインディング変数を追加することと同じです。以下は、htmlテンプレートを動的にロードし、ユーザーが追加したコメントをそれらに入力する前/次のボタンを実装する角度コードです。下部には、完全に機能するjsfiddleへのリンクがあります。

angular.module('app',[]).controller('controller', function($scope){
    var change;

    change = function(){
        $scope.src = $scope.page + '.html';        
    };

    $scope.page = 1;
    $scope.items = [];

    change();

    $scope.submit = function(text){
        $scope.items.push(text);
    };
    $scope.next = function () {
        if($scope.page < 3){
            $scope.page++;
            change();
        }
    };

    $scope.previous = function () {
        if($scope.page > 1){
            $scope.page--;
            change();
        }
    };

});

http://jsfiddle.net/jwanga/rnL7c/

于 2013-03-05T16:52:45.073 に答える