使用ng-show/ng-hide与谷歌图表

Question

Heyo，我正在尝试制作一个div，其中包含单击时上下滑动的谷歌图表。我可以得到包含图表的实际div来设置动画，但图表本身不会响应。我怀疑这是因为谷歌图表对象注入了太多html，但我不知道如何修复它。如果问题格式不正确，请提前道歉，这是我第一次尝试Stack Overflow。下面是我的代码，谷歌图表被注入到高程图div:中

HTML:
<div class="leftContent" ng-controller="ElevationProfileController as Elevation" >
<div class="chart-slide" ng-click="Elevation.slide()" ng-show="Elevation.show">
  <div id="elevation-chart" ng-show="Elevation.show" ></div>  
</div>

JS:
angular.module('appName').controller('ElevationProfileController', function(){
  this.show = true;
  this.slide = function(){
    this.show = !this.show;
  }
})
CSS:
.chart-slide.ng-hide-add,
.chart-slide.ng-hide-remove {
  display:block!important;
}
.chart-slide.ng-hide-remove.ng-hide-remove-active {
  -webkit-animation:0.5s slide-up;
  animation:0.5s slide-up;
  transition: .3s linear all;
  height: 15%;
}
.chart-slide.ng-hide-add.ng-hide-add-active {
  -webkit-animation:0.5s slide-down;
  animation:0.5s slide-down;
  transition: .3s linear all;
  height: 5%;
}
.chart-slide{
    height: 15%;
    width: 100%;
  border: 5px solid black;
}
.chart-slide.ng-hide {
  height:5%;
  display:block!important;
}
#elevation-chart {
    width: 90%;
    height: 100%;
  border: 2px solid orange;
}
#elevation-chart.ng-hide-add,
#elevation-chart.ng-hide-remove {
  display:block!important;
}
#elevation-chart.ng-hide-remove.ng-hide-remove-active {
  -webkit-animation:0.5s slide-up;
  animation:0.5s slide-up;
  transition: .3s linear all;
  height: 100%;
}
#elevation-chart.ng-hide-add.ng-hide-add-active {
  -webkit-animation:0.5s slide-down;
  animation:0.5s slide-down;
  transition: .3s linear all;
  height: 0%;
}

Answer 1

我不确定this在这种情况下的行为，但我确信您需要使用$scope。

您必须在控制器中注入一个作用域，然后才能管理您的视图。

angular.module('appName').controller('ElevationProfileController', function($scope){
     $scope.show = true;
     $scope.slide = function(){
         $scope.show = false;
     }
})

查看此处的文档