Question

我正在使用ng-include在我的Angular应用程序中动态加载模板。我的一个模板有ag-grid。我使用淡出角度动画的简单淡入淡出所有其他模板使用ng-iclude动画，而不是具有ag-grid的模板。以下是我遇到的简化问题。

如果在模板脚本中删除了ag-grid指令（<div ag-grid="gridOptions" class="ag-fresh" ></div>），动画将会起作用。

如何解决这个问题？

agGrid.initialiseAgGridWithAngular1(angular);

var module = angular.module("example", ["agGrid", "ngAnimate"]);

module.controller("exampleCtrl", function($scope) {

  var columnDefs = [{headerName: "Make",field: "make"},
    {headerName: "Model",field: "model"},
    {headerName: "Price",field: "price"}
  ];

  var rowData = [{make: "Toyota", model: "Celica",price: 35000},
    {make: "Ford",model: "Mondeo",price: 32000},
    {make: "Porsche",model: "Boxter",price: 72000}
  ];

  $scope.gridOptions = {
    columnDefs: columnDefs,
    rowData: rowData
  };

  $scope.url = null;

  $scope.setDlg = function() {

    if (!$scope.url)
      $scope.url = 'test.html';
    else
      $scope.url = null;
  }

});

#wrap {
  width: 452px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: red;
  padding: 25px;
}

.ag-fresh{
    position: relative;
    height: 100%;
}

.animateStartUpScreen.ng-enter,
.animateStartUpScreen.ng-enter .model {
  transition: all 5000ms;
  /*transition-delay: 1000ms;*/
}

.animateStartUpScreen.ng-enter .model {
  opacity: 0 !important;
}

.animateStartUpScreen.ng-enter.ng-enter-active .model {
  opacity: 1 !important;
}

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.5/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/6.3.0/ag-grid.js"></script>
</head>
<body ng-app="example" ng-controller="exampleCtrl">

  <button type="" ng-click="setDlg()">show dialog</button>

  <div ng-include="url" class="animateStartUpScreen" style="overflow: hidden;"></div>


  <script type="text/ng-template" id="test.html">

    <div id="wrap" class="model">
      <div ag-grid="gridOptions" class="ag-fresh" ></div>
    </div>

  </script>

</body>

如何使用ng-include为ag-grid容器制作动画？

0 个答案: