I am currently experiencing issues with dynamically changing the height using the angular-gantt library. Despite setting a new value for the maxHeight attribute in the controller, it does not reflect on the view as expected. I have seen this feature work in the demo app (Angular Gantt demo - by clicking Layout->Height). Am I overlooking something here? Any guidance would be appreciated.
Below is a snippet of my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="angular-gantt.css" />
<script src="angular.js"></script>
<script src="moment.js"></script>
<script src="angular-moment.js"></script>
<script src="angular-gantt.js"></script>
</head>
<body ng-app="myApp">
<script>
var myApp = angular.module('myApp', ['gantt']);
myApp.controller('Ctrl', ['$scope','$window', function($scope, $window){
$scope.cutSomeHeight = function() {
$scope.options.maxHeight -= 50;
}
$scope.options = {
maxHeight: 500,
data: [],
viewScale: "1 month",
columnWidth: 100
}
for (var i=0; i<100; i++){
$scope.options.data.push({name: 'Task' + i, tasks: [{name: i, from: moment("2015-01-01","YYYY-MM-DD").add(i % 12, 'months'), to: moment("2015-06-01","YYYY-MM-DD").add(i % 12, 'months')}]})
}
}]);
</script>
<div ng-controller="Ctrl">
<button ng-click="cutSomeHeight()">Cut</button>
<div gantt options="options"></div>
</div>
</body>
</html>