Question

我在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>上工作？

我搜索过文档和其他来源但找不到任何内容。

Answer 1

问题是你没有使用角度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',..)。使用角度指令和框架使代码更容易遵循，实现和调试。

Answer 2

一个简单的$scope.$apply()就可以了。咄。

Answer 3

就我个人而言，我认为ng-echarts完全混乱，有100多行代码，所以我为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;
}

获取click事件的echarts以更改angularjs中附加到$ scope的变量的值

3 个答案: