【发布时间】：2017-09-25 19:29:34
【问题描述】：
如何使用 Go.js 制作动态链接。
使用下面的代码，我使用静态值创建了两个颜色链接。我想让这些值是动态的（应该取自范围）。
我已经在 $scope.model inColor 和 outColor 中声明了颜色名称，分别代表开始和结束颜色。
这是我的代码和 Plunkr 示例：
scripts.js
var app = angular.module('app', []);
app.directive('goDiagram', function($http) {
return {
restrict: 'E',
template: '<div></div>',
replace: true,
scope: {
model: '=goModel'
},
link: function(scope, element, attrs) {
if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
var $ = go.GraphObject.make;
var rainbow = $(go.Brush, "Linear", {
0: "red",
1: "green"
});
var diagram = $(go.Diagram, element[0], {
nodeTemplate: $(go.Node, "Auto", {
locationSpot: go.Spot.Center
}, {
width: 120,
height: 15,
locationSpot: go.Spot.Center
},
new go.Binding("location"),
$(go.Shape, {
fill: "#e74c3c",
stroke: '#c0392b'
}, {
portId: "",
cursor: "pointer",
strokeWidth: 0,
}),
$(go.TextBlock, {
margin: 0,
stroke: "#eee"
},
new go.Binding("text", "key")
)
),
linkTemplate: $(go.Link, {
routing: go.Link.AvoidsNodes,
reshapable: true,
resegmentable: true
},
$(go.Shape,
{ strokeWidth: 3 , stroke: rainbow },
// new go.Binding("stroke", rainbow),
),
$(go.Shape, {
toArrow: "Standard"
}),
),
});
function updateAngular(e) {
if (e.isTransactionFinished) {
scope.$apply();
}
}
function updateSelection(e) {
diagram.model.selectedNodeData = null;
var it = diagram.selection.iterator;
while (it.next()) {
var selnode = it.value;
// ignore a selected link or a deleted node
if (selnode instanceof go.Node && selnode.data !== null) {
diagram.model.selectedNodeData = selnode.data;
break;
}
}
scope.$apply();
}
// watch scope
scope.$watch("model", function(newmodel) {
if (newmodel != undefined) {
var oldmodel = diagram.model;
if (oldmodel !== newmodel) {
diagram.removeDiagramListener("ChangedSelection", updateSelection);
diagram.model = newmodel;
diagram.addDiagramListener("ChangedSelection", updateSelection);
}
}
});
}
}
});
app.controller('appController', function($scope) {
$scope.init = function(d) {
$scope.hello = "Hello Plunker!!!!";
$scope.model = new go.GraphLinksModel(
[{
key: "Alpha",
color: "lightblue",
location: new go.Point(150, 130)
}, {
key: "Beta",
color: "orange",
location: new go.Point(350, 130)
}, {
key: "Gamma",
color: "lightgreen",
location: new go.Point(150, 230)
}, {
key: "Delta",
color: "pink"
}], [{
from: "Alpha",
to: "Beta",
inColor: "red",
outColor: "blue"
}, {
from: "Alpha",
to: "Gamma",
inColor: "yellow",
outColor: "blue"
}, {
from: "Beta",
to: "Gamma",
inColor: "green",
outColor: "pink"
}, {
from: "Gamma",
to: "Delta",
inColor: "black",
outColor: "red"
}, {
from: "Delta",
to: "Alpha",
inColor: "violet",
outColor: "green"
}]);
$scope.model.selectedNodeData = null;
}
});
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js@1.5.10" data-semver="1.5.10" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js"></script>
<script data-require="angular-route@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="https://gojs.net/latest/release/go.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="appController">
<div ng-init="init()">
<h1>{{hello}}</h1>
<go-diagram go-model="model" style="border: solid 1px black; width:100%; height:400px"></go-diagram>
</div>
</body>
</html>
【问题讨论】：
标签： javascript angularjs gojs