在单击事件上获取 echarts 以更改 angularjs 中附加到 $scope 的变量的值答案

【问题标题】：get echarts on click event to change value of variable attached to $scope in angularjs在单击事件上获取 echarts 以更改 angularjs 中附加到 $scope 的变量的值
【发布时间】：2018-02-14 15:15:46
【问题描述】：

我在我的 angularjs 项目中使用 echarts。如果可能的话，我宁愿不必使用 ng-echarts 模块。我希望能够在图表对象上获得一个单击事件，以更改 $scope 上可用于切换 ng-show 的变量的值

我在控制器中的代码是这样的：

myChart = echarts.init(document.getElementById('main'));

// code that prepares the graph data goes here
// ...

myChart.setOption(option,true); 

myChart.on('click', function(e) {

  //this works fine
  console.log(e) 

  // this does nothing
  $scope.showDiv = true //this does nothing
})

有没有办法让$scope.showDiv = true 在视图中实际处理<div ng-if="showDiv">test</div>？

我已经搜索了文档和其他来源，但找不到任何东西。

【问题讨论】：

标签： angularjs echarts

【解决方案1】：

问题是您没有使用 Angular 的 ng-click 函数，它会自动将代码包装在 $apply() 中。由于您使用的是非角度代码，因此您需要自己执行此操作。只需在方法末尾添加$scope.$apply()。 This article 有一些很好的信息。

什么时候手动调用 $apply()？

如果 AngularJS 通常将我们的代码包装在 $apply() 中并开始一个 $digest 循环，那么您什么时候需要手动调用 $apply() 呢？实际上，AngularJS 很清楚地说明了一件事。它将仅考虑在 AngularJS 上下文中完成的那些模型更改（即更改模型的代码包含在 $apply() 中）。 Angular 的内置指令已经这样做了，因此您所做的任何模型更改都会反映在视图中。但是，如果您在 Angular 上下文之外更改任何模型，则需要通过手动调用 $apply() 来通知 Angular 更改。这就像告诉 Angular 你正在更改一些模型，它应该触发观察者以便你的更改正确传播。

另外，我建议使用ng-echarts 和ng-click 而不是on('click',..)。使用 Angular 指令和框架使代码更易于遵循、实现和调试。

【讨论】：

在我看到这个之前就想通了！但仍然正确答案！谢谢！

【解决方案2】：

一个简单的$scope.$apply() 就成功了。呵呵。

【讨论】：

【解决方案3】：

就我个人而言，我认为ng-echarts 完全是一团糟，有 100 多行代码，所以我为 angular 1.5+ 编写了自己的代码。

它只有 20 行，可以满足您的所有需求，包括（动画）在您的 config 或 option 变量发生变化时更新图表（通过 $onChanges 自动检测到）。

将来可能会帮助您或其他人。

组件

app.component('chart', {
    bindings: {
        config      : '<',
        option      : '<'
    },
    controller: function ($element, $window) {
        let chart = echarts.init($element[0]);

        this.$onInit = function() {
            angular.element($window).on('resize', function() {
                chart.resize()
            });
        }

        this.$onChanges = function(changes) {
            chart.setOption(this.option, this.refresh);
            chart.resize();
            chart.hideLoading();
        }
    }
})

模板

<chart
    option="myChart.option" 
    config="myChart.config">
</chart>

CSS

// Fix for Bootstrap init width
chart {
    width: 100%; 
    height: 250px; 
    float: left;
}

【讨论】：