ツリー構造に変更が加えられたときにツリーメニューのブランチが適切に更新されるようにするために、考えられるすべての組み合わせを試してみました。基本的に私が持っているのは、ツリーの分岐を表示するための再帰的なネストされたディレクティブのセットです。ツリー構造の特定の部分のディレクティブデータを格納する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]
コメントを追加