Angular中点击Box2按钮如何高亮来源Box1元素？

现有Box1（左侧显示），点击其上的按钮可打开Box2（右侧显示）。需求为点击Box2上的按钮时，让Box1高亮，以标识Box2源自Box1。以下是基于AngularJS的实现方案：

1. 定义高亮样式 #

先编写CSS，给Box1的高亮状态设置视觉样式：

.box-highlight {
  border: 2px solid #ff7f50; /* 自定义高亮边框颜色 */
  background-color: rgba(255, 127, 80, 0.1); /* 自定义高亮背景色 */
}

2. 编写HTML结构 #

通过ng-class绑定高亮状态，ng-click触发对应逻辑：

<div ng-app="myApp" ng-controller="BoxController">
  <!-- 左侧Box1 -->
  <div class="box1" ng-class="{'box-highlight': isBox1Highlighted}">
    <button ng-click="openBox2()">打开Box2</button>
  </div>

  <!-- 右侧Box2 -->
  <div class="box2" ng-show="isBox2Open">
    <button ng-click="highlightBox1()">高亮Box1</button>
  </div>
</div>

3. 实现控制器逻辑 #

在AngularJS控制器中定义状态变量和触发方法：

angular.module('myApp', [])
.controller('BoxController', function($scope) {
  // 初始化状态：Box2默认关闭，Box1默认不高亮
  $scope.isBox2Open = false;
  $scope.isBox1Highlighted = false;

  // 打开Box2的方法
  $scope.openBox2 = function() {
    $scope.isBox2Open = true;
  };

  // 高亮Box1的方法
  $scope.highlightBox1 = function() {
    // 若需点击后持续高亮，直接设为true即可
    $scope.isBox1Highlighted = true;
    // 若需点击切换高亮/取消状态，替换为：
    // $scope.isBox1Highlighted = !$scope.isBox1Highlighted;
  };
});

可选：自动取消高亮 #

如果需要Box1高亮一段时间后自动恢复原样，可借助$timeout实现：

angular.module('myApp', [])
.controller('BoxController', function($scope, $timeout) {
  // ... 保留其他初始化代码

  $scope.highlightBox1 = function() {
    $scope.isBox1Highlighted = true;
    // 3秒后取消高亮
    $timeout(function() {
      $scope.isBox1Highlighted = false;
    }, 3000);
  };
});

内容的提问来源于stack exchange，提问作者Kyobuki