AngularJS中无需ng-echarts，通过ECharts点击事件修改$scope变量控制视图

嘿，我完全懂你遇到的这个坑！当你在ECharts的点击回调里直接修改$scope.showDiv时，视图的ng-if没反应，核心原因是ECharts的事件回调运行在AngularJS的脏检查循环（digest cycle）之外——Angular根本不知道你改了变量，自然不会更新视图。

给你两个靠谱的解决方案：

方案一：用$scope.$apply()手动触发脏检查 #

Angular提供了$apply()方法，能把外部代码（比如ECharts的回调）纳入Angular的上下文，执行完后自动触发digest cycle，让视图感知到变量变化。把你的赋值操作放在$apply()的回调里就行：

// 假设你已经初始化了myChart实例
myChart.on('click', function(params) {
  $scope.$apply(function() {
    $scope.showDiv = true;
  });
});

小提醒：如果当前已经在digest cycle中调用$apply()，会抛出错误，不过ECharts的回调一般不会出现这种情况，放心用。

方案二：用$timeout间接触发（更安全） #

如果你不想手动处理digest的状态，可以用Angular的$timeout服务——它的回调会自动触发digest cycle，还能避免“digest already in progress”的错误。记得要在控制器里注入$timeout哦：

// 控制器依赖要加上$timeout
angular.module('myApp').controller('ChartCtrl', ['$scope', '$timeout', function($scope, $timeout) {
  // 初始化图表...

  myChart.on('click', function(params) {
    $timeout(function() {
      $scope.showDiv = true;
    });
  });
}]);

完整示例参考 #

这里给你一个完整的控制器代码片段，结合ECharts初始化和点击事件处理：

angular.module('myApp').controller('MyChartController', ['$scope', '$timeout', function($scope, $timeout) {
  $scope.showDiv = false;

  // 初始化ECharts实例
  var chartDom = document.getElementById('myChart');
  var myChart = echarts.init(chartDom);

  // 图表配置项
  var option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
      }
    ]
  };
  myChart.setOption(option);

  // 绑定点击事件，用$timeout方案
  myChart.on('click', function(params) {
    $timeout(function() {
      $scope.showDiv = !$scope.showDiv; // 切换状态，测试更直观
    });
  });
}]);

这样修改后，你的<div ng-if="showDiv">test</div>就能正常根据点击事件显示/隐藏啦！

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