本文详解如何在 angularjs 中实现上下两排字段（如10个上排 + 10个下排）之间的点击配对连线功能：用户依次点击一个上排字段和一个下排字段，自动生成 svg 连线；支持多次配对、状态重置与视觉反馈。
本文详解如何在 angularjs 中实现上下两排字段（如10个上排 + 10个下排）之间的点击配对连线功能：用户依次点击一个上排字段和一个下排字段，自动生成 svg 连线；支持多次配对、状态重置与视觉反馈。
在 AngularJS 应用中实现「点击两个字段生成连接线」的交互，核心在于坐标采集 → 状态暂存 → SVG 渲染 → 状态复位四个环节。以下是一个结构清晰、可扩展的完整实现方案。
✅ 核心思路说明
- 上排字段与下排字段分别用 ng-repeat 渲染，每个元素赋予唯一 ID（如 1_1, 2_3），便于 DOM 定位；
- 点击任一字段时，通过 getPosTop() 或 getPosBottom() 获取其左上角偏移坐标，并做轻微偏移校准（如 x + 15, y + 30），确保连线起点/终点落在图标视觉中心；
- 使用 $scope.unline = { from: {...}, to: {...} } 暂存待绘制的线段端点；
- 首次点击记录 from，第二次点击（必须是另一排）补全 to 并调用 clearLine() 将该线段推入 $scope.lines 数组；
- 所有连线统一由 <svg> + <line ng-repeat="line in lines"> 动态渲染，利用 AngularJS 的双向绑定实现即时更新；
- 为提升交互体验，点击后对目标元素添加缩放动画（transform: scale(0.8)），提供明确视觉反馈。
? 完整代码实现
HTML 结构（含 SVG 容器）
<div ng-app="plunker" ng-controller="MainCtrl">
<!-- 上排字段 -->
<div class="parent_span">
<div class="top_span" ng-repeat="c in top_span track by $index">
<span id="1_{{$index}}" ng-click="getPosTop($index)">
<svg fill="#000000" width="30" height="30" viewBox="0 0 490 490">
<path d="M0,0v490h490V0H0z M430.1,332.9h-87.5v50.9h-33.1v50.9H180.4v-50.6h-33.1v-51.3H59.9v-278h46.7v66.5h38.5V54.8h40.8v66.5h38.5V54.8h40.8v66.5h38.5V54.8h40.8v66.5H383V54.8h46.7v278.1L430.1,332.9z"/>
</svg>
</span>
<div>{{c.name}}</div>
</div>
</div>
<!-- 下排字段 -->
<div class="parent_span_2">
<div class="bottom_span" ng-repeat="c in bottom_span track by $index">
<span id="2_{{$index}}" ng-click="getPosBottom($index)">
<svg fill="#000000" width="30" height="30" viewBox="0 0 490 490">
<path d="M0,0v490h490V0H0z M430.1,332.9h-87.5v50.9h-33.1v50.9H180.4v-50.6h-33.1v-51.3H59.9v-278h46.7v66.5h38.5V54.8h40.8v66.5h38.5V54.8h40.8v66.5h38.5V54.8h40.8v66.5H383V54.8h46.7v278.1L430.1,332.9z"/>
</svg>
</span>
<div>{{c.name}}</div>
</div>
</div>
<!-- 连线 SVG 容器（置于底层） -->
<div class="line">
<svg>
<line
ng-repeat="line in lines track by $index"
x1="{{line.from.x}}"
y1="{{line.from.y}}"
x2="{{line.to.x}}"
y2="{{line.to.y}}"
stroke="#e74c3c"
stroke-width="2.5"
stroke-linecap="round"
/>
</svg>
</div>
</div>CSS 样式（确保布局与层级正确）
.parent_span, .parent_span_2 {
display: flex;
justify-content: space-between;
margin: 40px 0;
}
.top_span, .bottom_span {
display: flex;
flex-direction: column;
align-items: center;
}
.line {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: -1;
}
.line svg {
width: 100%; height: 100%;
}
/* 点击缩放反馈 */
.top_span span, .bottom_span span {
transition: transform 0.15s ease;
}AngularJS 控制器逻辑（关键优化版）
var app = angular.module("plunker", []);
app.controller("MainCtrl", function($scope) {
// 初始化上下两排字段（支持任意数量，此处各5个示例）
$scope.top_span = Array.from({ length: 5 }, (_, i) => ({ name: (i + 1).toString() }));
$scope.bottom_span = Array.from({ length: 5 }, (_, i) => ({ name: (i + 1).toString() }));
$scope.lines = []; // 已保存的连线数组
$scope.unline = {}; // 临时存储待提交的线段 { from: {x,y}, to: {x,y} }
// 获取上排字段坐标（点击触发）
$scope.getPosTop = function(index) {
const el = document.getElementById(`1_${index}`);
if (!el) return;
el.style.transform = "scale(0.8)";
const rect = el.getBoundingClientRect();
const x = rect.left + window.scrollX + 15; // 水平居中偏移
const y = rect.top + window.scrollY + 30; // 垂直底部偏移（适配图标位置）
if ($scope.unline.from && !$scope.unline.to) {
// 第二次点击：补全 to 并提交
$scope.unline.to = { x, y };
$scope.lines.push(angular.copy($scope.unline));
$scope.unline = {};
} else {
// 第一次点击：初始化 from
$scope.unline.from = { x, y };
}
};
// 获取下排字段坐标（点击触发）
$scope.getPosBottom = function(index) {
const el = document.getElementById(`2_${index}`);
if (!el) return;
el.style.transform = "scale(0.8)";
const rect = el.getBoundingClientRect();
const x = rect.left + window.scrollX + 15;
const y = rect.top + window.scrollY + 10; // 下排图标更靠上，y 偏移略小
if ($scope.unline.from && !$scope.unline.to) {
$scope.unline.to = { x, y };
$scope.lines.push(angular.copy($scope.unline));
$scope.unline = {};
} else {
$scope.unline.from = { x, y };
}
};
// 【可选】清空所有连线
$scope.clearAllLines = function() {
$scope.lines = [];
$scope.unline = {};
};
});⚠️ 注意事项与最佳实践
- 坐标计算可靠性：务必使用 getBoundingClientRect() 替代 offsetLeft/Top，避免因滚动、定位或 CSS 变换导致坐标偏差；
- 防误操作：当前逻辑允许「先点下排再点上排」，若需强制「上→下」顺序，可在 $scope.unline 中增加 phase: 'top' | 'bottom' 状态控制；
- 性能优化：当连线数量较多（>50 条）时，建议将 <line> 改为 Canvas 绘制，或使用 track by $index 避免重复渲染；
- 响应式适配：若页面支持缩放或响应式布局，请在 getPos* 中监听 window.resize 并重绘所有连线；
- AngularJS 版本兼容性：示例基于 1.0.6，若使用 1.3+，建议启用 ng-cloak 防止 SVG 闪烁，并考虑升级至 Angular（v2+）以获得更现代的图形方案（如 D3 + Angular 绑定）。
通过以上实现，你已拥有一套健壮、可维护的 AngularJS 字段连线交互系统——既满足基础需求，也预留了扩展空间。实际项目中，还可进一步集成撤销/重做、连线样式定制（虚线、箭头、颜色映射）、数据持久化等高级能力。
