У меня есть следующий угловой контроллер:
{ id: 1, shape: "rect", label: "Start", class: "in-progress",
subGraph: {
expand: true,
nodes: [
{id: 10, shape: "rect", label: "Sub Process", class: "in-progress",
subGraph: {
expand: true,
nodes: [
{id: 15, label: "Beginning", shape: "rect", class: "default"},
{id: 16, label: "Middle", shape: "rect", class: "error"},
{id: 17, label: "End", shape: "rect", class: "in-progress"}
],
edges: []
}},
{id: 11, shape: "ellipse", label: "Review", class: "error"},
{id: 12, shape: "ellipse", label: "Finalize", class: "default"}
],
edges: [
{from: 10, to: 11, type: "circle", label: "", dashed: false},
{from: 11, to: 12, type: "diamond", label: "", dashed: false}
]
}
}
Вот что делает выполнение обновлений в моем контроллере вне настраиваемого компонента:
// node being updated is passed into the function below
function onNodeUpdated (node) {
for (var y = 0; y < this.nodes.length; y++) {
if (this.nodes[y].id === node.id) {
this.nodes.splice(y, 1, angular.copy(this.nodes[y]));
break;
} else if (this.nodes[y].subGraph) {
for (var x = 0; x < this.nodes[y].subGraph.nodes.length; x++) {
if (this.nodes[y].subGraph.nodes[x].id === node.id) {
this.nodes[y].subGraph.nodes.splice(x, 1, angular.copy(this.nodes[y].subGraph.nodes[x]));
break;
}
}
}
}
};
Я передаю узлы в свой пользовательский угловой компонент следующим образом в своем HTML:
<example nodes="ctrl.nodes" edges="ctrl.edges"></example>
Затем внутри моего компонента я наблюдаю за обновлениями этих узлов следующим образом внутри моей функции ссылок:
scope.$watchCollection("ctrl.nodes", function() {
renderGraph();
});
Вышеупомянутые часы для изменений в узлах - то есть различные формы узлов, добавленные классы или метки узлов. При обнаружении графика повторно отображает изменения в узлах. Это работает для узлов верхнего уровня - то есть узла с идентификатором №1 ниже, но не для вложенных узлов внутри подграфа.
Мой вопрос в том, как я могу прислушиваться к изменениям/обновлениям вложенных ребер и узлов - все в моем узле с идентификатором 1. Я еще не вижу пример, который еще не работал. Все обновления происходят за пределами "примерного" компонента. Единственное, что происходит внутри компонента: часы запускаются с новым массивом узлов и/или ребер, которые передаются.
Я пробовал:
scope.$watch("ctrl.nodes", function() {
renderGraph();
}, true);
scope.$watchCollection("ctrl.nodes.subGraph.nodes", function() {
renderGraph();
});
Оба никогда не вызывают $ watch внутри компонента, нуждаются в повторном рендеринге для обновления узлов и краев. Важное замечание состоит в том, что я не знаю, сколько субграфов будет у пользователя компонента, поэтому он должен быть динамическим для учета "n" количества уровней подграфа. Это возможно? благодаря
$scope.$watch(
function(){ return ctrl.nodes },
function(newVal, oldVal){
renderGraph();
}, true);
или же
$scope.$watch(
function(){ return ctrl.nodes.subGraph.nodes },
function(newVal, oldVal){
renderGraph();
}, true);
Также, если этот код находится в директиве образца, вы можете привязать данные к области действия в директиве.
Вы можете в значительной степени поставить наблюдателя на что-либо, используя этот синтаксис. то есть. Услуги и т.д.