ツリー構造に変更が加えられたときに、ツリー メニューのブランチが適切に更新されるように、考えられるあらゆる組み合わせを試してみました。基本的に、私が持っているのは、ツリーの分岐を表示するための再帰的なネストされたディレクティブのセットです。ツリー構造の任意の部分のディレクティブ データを格納する JavaScript クラスを作成しました。このクラスは、私が本質的にインターフェースしたモデルを保持しているため、いくつかの既知のメソッドがあります (たとえば、ajax からデータをロードする getVals() や、ツリーを構築するための共通プロパティを取得する getId()、getName()、getLabel() など)。 . 次に、これを 2 つの方法で使用して、このオブジェクトのペアでツリーを構築します。1 つ目は、特定の分岐点に対して、「グループ」を記述する単一のモデル (複数のサブブランチを持つ) を保持します。(基本的に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 レスト コールを実行しているため、データが保存されると、ツリーは変更を反映して更新されません。問題の 1 つは、子の UL タグの後に追加ボタンを設定したことです。これは、UL タグを含むテンプレートと同じディレクティブにあるため、問題なく更新できます。しかし、子は、各サブブランチ ラッパーを表示するために LI の周りの ng-repeat に関連付けられている 2 番目のディレクティブの下にあります。したがって、更新/削除ボタンはそのテンプレートに表示されますが、更新する必要があるスコープは親です。$parent.$parent を実行できることは理解しています。reload() を使用してリフレッシュ スクリプトを呼び出しますが、「移動」機能を実行しようとすると、ツリーの途中でリスト項目を移動している可能性があります。テンプレートの分岐点に「更新」ボタンがあり、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 でそれらをスローしても、更新が既に進行中であるというエラーがスローされることがあります。
だから、ディレクティブの階層ツリーで特定のディレクティブを更新する最良の方法は何だろうと思っていますか? 起点に戻る分岐点のタグを使用して各 subBranch にスタックを構築しようとしましたが、 treeStack['someParentId'].reload() を実行しようとすると、子スコープでは機能しないようです.
SW