Question

Heyo，我正试图制作一个包含谷歌图表的div，点击时上下滑动。我可以得到包含图表的实际div来制作动画，但图表本身不会响应。我怀疑这是因为有很多html被谷歌图表对象注入，但我不知道如何解决它。如果问题格式不正确，请提前道歉，这是我第一次涉足Stack Overflow。以下是我的代码的样子，Google图表被注入高程图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

我不确定这个在这种情况下的表现如何，但我确定你需要使用$ scope。

您必须在控制器中注入一个范围，您才能管理您的视图。

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

查看文档here

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

1 个答案: