我有以下Angular控制器:
{ 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();
});
以上监视节点的变化 - 即节点的不同形状,添加的类或节点标签的变化。检测到图形时,重新呈现显示节点的更改。这适用于顶级节点 - 即下面带有id#1的节点,但不适用于subGraph中的嵌套节点。
我的问题是如何监听嵌套边和节点的更改/更新 - 我的节点中id为1的所有内容。我还没有看到一个已经有效的示例。所有更新都发生在“示例”组件之外。组件内部发生的唯一事情是手表被传入的新节点数组和/或边缘被触发。
我试过了:
scope.$watch("ctrl.nodes", function() {
renderGraph();
}, true);
scope.$watchCollection("ctrl.nodes.subGraph.nodes", function() {
renderGraph();
});
两个尝试都不会在组件内调用$ watch,需要它为节点和边缘更新重新渲染。重要的是,我不知道该组件的用户将拥有多少个子图,因此需要动态来计算“n”个子图级别。这可能吗?感谢
答案 0 :(得分:1)
$scope.$watch(
function(){ return ctrl.nodes },
function(newVal, oldVal){
renderGraph();
}, true);
或
$scope.$watch(
function(){ return ctrl.nodes.subGraph.nodes },
function(newVal, oldVal){
renderGraph();
}, true);
此外,如果此代码在sample指令中,则可以绑定到指令范围内的数据。
你可以使用这种语法将观察者放在任何东西上。即。服务等...