huang-xiao-jian / echarts-ng

angularjs decoration for Baidu echarts.
MIT License
78 stars 23 forks source link

echarts-ng.js-Line666 :var vm = $scope; #6

Closed moux1024 closed 7 years ago

moux1024 commented 7 years ago

echarts-ng.js里第666行代码,echarts的指令配置部分,您的实现是:

function echartsDirective($echarts, $dimension) {
    return {
      priority: 5,
      restrict: "A",
      scope: {
        echarts: "=",
        echartsDimension: "=",
        config: "="
      },
      bindToController: true,
      controller: ["$scope", "$element", function ($scope, $element) {
        var vm = this;  //这里
        var OPTION = $echarts.getEchartsGlobalOption()
          , identity = vm.echarts 
          , element = $element[0];

        if (!identity) {
          throw new Error("Echarts Instance Identity Required");
        }

        /**
         * @type number
         *
         * @description - 初始化高度设定,避免echarts绘制失败
         */
        $dimension.shouldAdaptDimension(element, vm.echartsDimension) && $dimension.adaptEchartsDimension(element, vm.echartsDimension);
        /**
         * @type object
         *
         * @description - echarts 实例对象
         */
        var instance;

        instance = echarts.init(element, OPTION.theme);
        instance.setOption(OPTION);

        // 调色板增强
        $echarts.driftEchartsPalette(instance, OPTION.driftPalette);
        // 注册当前实例对象
        $echarts.registerEchartsInstance(identity, instance);
        // 绘制实例对象
        $echarts.updateEchartsInstance(identity, vm.config);

        $scope.$watchCollection("chart.config.title", function (current, prev) {
          if (!angular.equals(current, prev)) {
            $echarts.updateEchartsInstance(identity, vm.config);
          }
        });

        $scope.$watchCollection("chart.config.series", function (current, prev) {
          if (!angular.equals(current, prev)) {
            $echarts.updateEchartsInstance(identity, vm.config);
          }
        });

        $scope.$on("$destroy", function () {
          instance.clear();
          instance.dispose();
          $echarts.removeEchartsInstance(identity);
          $dimension.removeEchartsDimension(element);
        });
      }],
      controllerAs: "chart"
    };
  }

里面的var vm = this;这行指定了vm, 后面调用了vm的echarts属性,然而$scope和this并不相等。$scope.echarts存在,this.echarts即vm.echarts并不存在,故得到undefined,导致_Echarts Instance Identity Required_错误,修改为$scope后正常使用 麻烦确认一下原因 已更新问题 @bornkiller

huang-xiao-jian commented 7 years ago

能描述的更清楚一点么,这个我不怎么能理解, @moux1024

Icgemu commented 7 years ago

![Uploading image.png…]()

angular 1.6.0 下出错,1.5.8下没有问题。

huang-xiao-jian commented 7 years ago

@moux1024 @Icgemu 麻烦描述详细一些。

huang-xiao-jian commented 7 years ago

qq20170107-1

基本确认是这个问题,控制器实例化在1.6.0之后,binding在后,所以实例化的时候无法获取对应参数。