anglejsの特定のディレクティブを更新します

スコット

ツリー構造に変更が加えられたときにツリーメニューのブランチが適切に更新されるようにするために、考えられるすべての組み合わせを試してみました。基本的に私が持っているのは、ツリーの分岐を表示するための再帰的なネストされたディレクティブのセットです。ツリー構造の特定の部分のディレクティブデータを格納するJavaScriptクラスを作成しました。このクラスは、私が基本的にインターフェースしたモデルを保持しているため、いくつかの既知のメソッドがあります(たとえば、ajaxからデータをロードするgetVals()、ツリーを構築するための共通プロパティを取得するgetId()、getName()、getLabel())。 。次に、このオブジェクトのペアを使用してツリーを構築するために2つの方法で使用します。最初の方法は、特定の分岐点に対して、「グループ」を記述する単一のモデル(複数のサブブランチを持つ)を保持することです。(基本的にはDoctrineエンティティスタイルオブジェクトの配列であるDoctrine ORMコレクションからロードされたデータを使用)。もう1つは、実際の分岐であるエンティティを表す単一のモデルです。トランク(分岐点)には2つのオプションがあります。1つはそのグループ/親の詳細を表示するオプションで、もう1つは子の名前だけを表示するオプションです。次に、各子には、詳細を表示するか、子を表示するかなどのオプションがあります。

function treeBranch() {
    this.refresh = false;

    // class and title information for expander button
    this.toggleShown = function() {
        this.vis = !(this.vis);

        if(this.vis == true) {
            this.trunkClass = 'glyphicon glyphicon-chevron-down';
            this.trunkTitle = 'collapse';
        } else {
            this.trunkClass = 'glyphicon glyphicon-chevron-right';
            this.trunkTitle = 'expand';
        }
};

    // default populator code
    this.populate = function(toggle,force,pcbf) {
        toggle = (typeof(toggle) == 'boolean') ? toggle : true;
        force  = (typeof(force) == 'force') ? force : false;
        var br = this;
        if((typeof(br.subBranches) == 'undefined') || (br.subBranches.length == 0))
            force = true;

        if((typeof(br.model) != 'undefined') && (typeof(br.loadMethod) != 'undefined')) {
            br.model[br.loadMethod](
                function() {
                    br.subBranches = []; // reset subBranches array
                    for(var k in br.model.subs) { // subs should be loaded with a keyed array
                        var newSubBranch = new treeBranch();
                        newSubBranch.model = br.model.subs[k];
                        newSubBranch.label = 'Name: ' + newSubBranch.model.getName(); // expects model to have a getName method
                        newSubBranch.trunk = br;
                       br.subBranches.push(newSubBranch);
                    }
                    (toggle == true) && br.toggleShown();
                     (typeof(pcbf) == 'function') && pcbf();
                 },
                 force,
                 br.model.getFilter()
             );
         }
     };

     this.getLabel = function() {
         if(this.model != null) {
             return ((typeof(this.model.getId) == 'function') ? this.model.getId() : '') +
                 ((typeof(this.model.getName) == 'function') ? ' '+this.model.getName() : '');
         } else {
             return this.label;
         }
     }

     // core properties
     this.label = '';
     this.vis = false;
     this.trunkClass = 'glyphicon glyphicon-chevron-right';
     this.trunkTitle = 'expand';
     this.subBranches = [];
     this.trunk = null;

     this.model = null;
     this.loadMethod = 'getVals'; // function of model to populate it with data

 };
/**
   -Trunk {treeBranch with entity as model}
      [show details option]
      +--> branches {treeBranch instance with collection as model}
           [show branches/children option]
           - branch1 {treeBranch entity model}
            [show details option]
                +--> branches {treeBranch collection model}
                     [show branches/children option]
                     - subbranch1 ... etc
           - branch2 {treeBranch with entity as model}
            [show details option]
                +--> branches {treeBranch collection model}
                     [show branches/children option]
     ... etc ...
*/

特定の分岐点(エンティティ)のプロパティを操作したり、ブランチ自体を追加/削除/移動したりする関数を追加し始めると、問題が発生します。追加/更新/削除のためにフォームが機能しています(まだ移動中です)が、データが保存されると、モデルが独自のajax rest呼び出しを実行しているため、変更を反映するようにツリーが更新されません。問題の1つは、子のULタグの後に追加ボタンを設定することです。これはULタグ付きのテンプレートと同じディレクティブにあるため、正常に更新できます。ただし、子は、各サブブランチラッパーを表示するためのLIの周りのng-repeatに関連付けられた2番目のディレクティブの下にあります。したがって、更新/削除ボタンはそのテンプレートに表示されますが、更新する必要があるスコープは親です。$ parent。$ parentを実行できることを理解しています。更新スクリプトを呼び出すためにreload()を実行しますが、「move」機能の実行に取り掛かると、ツリーの途中でリストアイテムを移動している可能性があります。テンプレートの分岐点に「更新」ボタンがあり、document.getElementById( 'branchpointX')。click();を実行してみました。しかし、それは不器用であり、スコープの.reload()関数内でスコープ内のそのポイントを更新するための最良の方法を見つけようと努力してきました。$ scope。$ applyは既存の$ digest更新と衝突することがあり、$ timeoutでそれらをスローしても、更新がすでに進行中であるというエラーがスローされることがあります。document.getElementById( 'branchpointX')。click();を実行してみました。しかし、それは不器用であり、スコープの.reload()関数内でスコープ内のそのポイントを更新するための最良の方法を見つけようと努力してきました。$ scope。$ applyは既存の$ digest更新と衝突することがあり、$ timeoutでそれらをスローしても、更新がすでに進行中であるというエラーがスローされることがあります。document.getElementById( 'branchpointX')。click();を実行してみました。しかし、それは不器用であり、スコープの.reload()関数内でスコープ内のそのポイントを更新するための最良の方法を見つけようと努力してきました。$ scope。$ applyは既存の$ digest更新と衝突することがあり、$ timeoutでそれらをスローしても、更新がすでに進行中であるというエラーがスローされることがあります。

だから私は、特定のディレクティブをそのディレクティブの階層ツリーで更新するための最良の方法は何でしょうか?分岐点のタグを使用して各サブブランチにスタックを構築しようとしましたが、treeStack ['someParentId']。reload()を実行しようとすると、子スコープ内では機能しないようです。 。

SW

スコット

私が探していたのは、rootScopeを使用して$ Broadcastトリガーを設定し、それを$ onとそれぞれのスコープのコールバック関数でリッスンできることでした。

たとえば、saveは、呼び出されたときにコールバック関数を持っているため、(別のファクトリコントローラー内の)編集ディレクティブで$ rootScope。$ broadcast( 'branch1Reload');を追加できます。コールバックに対して、そのブランチのディレクティブには$ rootscopeが必要です。$ on( 'branch1Reload'、function(){/ * do stuff * /; scope.reload();});

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

angleJSの別のディレクティブからhtmlにディレクティブを追加します

分類Dev

anglejsディレクティブのコントロールビューを更新します

分類Dev

anglejsディレクティブのFoundation5アコーディオンが例外をスローします

分類Dev

anglejs-テンプレート内のディレクティブ要素をコピーします

分類Dev

anglejsディレクティブリンク関数の要素クラスを変更します

分類Dev

anglejsディレクティブの関数として属性をトリガーします

分類Dev

'=?'の意味は何ですか?angleJSディレクティブでスコープ宣言を分離しますか?

分類Dev

angleJSディレクティブをCSSなしで使用して、偶数行/奇数行に特定の色を付けます

分類Dev

コールバックのディレクティブを更新しますか?

分類Dev

anglejsディレクティブのコンテンツを更新できません

分類Dev

AppFogの特定のディレクトリを更新します

分類Dev

anglejsディレクティブをangular10に変換します

分類Dev

angleJsディレクティブのtemplateUrlの正しいパスは何である必要がありますか?

分類Dev

anglejsディレクティブウェイクスコープモデルからの入力のプレースホルダーを変更します 'undefined'

分類Dev

anglejs-nvd3-データを更新するディレクティブ

分類Dev

別のディレクティブからディレクティブの属性を取得しますか?

分類Dev

ngClickディレクティブ内の要素を取得します

分類Dev

ディレクティブのtemplateUrlで$ rootScopeを取得します

分類Dev

JqueryTimepickerはAngularJSディレクティブのモデルを更新しません

分類Dev

Angularでディレクティブを更新します

分類Dev

ディレクティブのng-repeatオブジェクト属性を更新します

分類Dev

ディレクティブ定義の他のディレクティブ内にディレクティブを追加します

分類Dev

Angularのディレクティブ内に属性ディレクティブを追加します

分類Dev

子ディレクティブで、親ディレクティブと$ scopeの値を使用します

分類Dev

anglejs:ディレクティブテンプレートを強制的に再レンダリング/完全に更新します

分類Dev

anglejs:コントローラーからディレクティブにデータを渡すための好ましい方法は何ですか?

分類Dev

anglejs:コントローラーからディレクティブにデータを渡すための好ましい方法は何ですか?

分類Dev

アクティビティを特定の回数更新します

分類Dev

AngularJsディレクティブが別のディレクティブのスコープを更新しない

Related 関連記事

  1. 1

    angleJSの別のディレクティブからhtmlにディレクティブを追加します

  2. 2

    anglejsディレクティブのコントロールビューを更新します

  3. 3

    anglejsディレクティブのFoundation5アコーディオンが例外をスローします

  4. 4

    anglejs-テンプレート内のディレクティブ要素をコピーします

  5. 5

    anglejsディレクティブリンク関数の要素クラスを変更します

  6. 6

    anglejsディレクティブの関数として属性をトリガーします

  7. 7

    '=?'の意味は何ですか?angleJSディレクティブでスコープ宣言を分離しますか?

  8. 8

    angleJSディレクティブをCSSなしで使用して、偶数行/奇数行に特定の色を付けます

  9. 9

    コールバックのディレクティブを更新しますか?

  10. 10

    anglejsディレクティブのコンテンツを更新できません

  11. 11

    AppFogの特定のディレクトリを更新します

  12. 12

    anglejsディレクティブをangular10に変換します

  13. 13

    angleJsディレクティブのtemplateUrlの正しいパスは何である必要がありますか?

  14. 14

    anglejsディレクティブウェイクスコープモデルからの入力のプレースホルダーを変更します 'undefined'

  15. 15

    anglejs-nvd3-データを更新するディレクティブ

  16. 16

    別のディレクティブからディレクティブの属性を取得しますか?

  17. 17

    ngClickディレクティブ内の要素を取得します

  18. 18

    ディレクティブのtemplateUrlで$ rootScopeを取得します

  19. 19

    JqueryTimepickerはAngularJSディレクティブのモデルを更新しません

  20. 20

    Angularでディレクティブを更新します

  21. 21

    ディレクティブのng-repeatオブジェクト属性を更新します

  22. 22

    ディレクティブ定義の他のディレクティブ内にディレクティブを追加します

  23. 23

    Angularのディレクティブ内に属性ディレクティブを追加します

  24. 24

    子ディレクティブで、親ディレクティブと$ scopeの値を使用します

  25. 25

    anglejs:ディレクティブテンプレートを強制的に再レンダリング/完全に更新します

  26. 26

    anglejs:コントローラーからディレクティブにデータを渡すための好ましい方法は何ですか?

  27. 27

    anglejs:コントローラーからディレクティブにデータを渡すための好ましい方法は何ですか?

  28. 28

    アクティビティを特定の回数更新します

  29. 29

    AngularJsディレクティブが別のディレクティブのスコープを更新しない

ホットタグ

アーカイブ