Chronicle Basic Example

by AdvanTiSS

HTML

<script src="https://rawgit.com/Blitzen/Angular-Chronicle/master/chronicle.js"></script>
<div ng-controller="MyCtrl">
  {{num.v}}
  <button ng-click="increment1()">Increment by 1</button>
  <button ng-click="increment5()">Increment by 5</button>
  <br>
  <button ng-click="undo()" ng-if="canUndo">Undo</button>
  <button ng-click="redo()" ng-if="canRedo">Redo</button>
</div>

JavaScript

var myApp = angular.module('myApp',['Chronicle']);

myApp.controller('MyCtrl', function($scope, Chronicle) {
    //Initializtion of variables
    $scope.num = {value:1};
    $scope.canUndo = false;
    $scope.canRedo = false;
    
    //Creation of chronicle object
    $scope.numChronicle = Chronicle.record('num', $scope);
    $scope.canUndoRedo = function(){
        $scope.canUndo = $scope.numChronicle.canUndo();
        $scope.canRedo = $scope.numChronicle.canRedo();
    };
    $scope.numChronicle.addOnAdjustFunction($scope.canUndoRedo);
    $scope.numChronicle.addOnUndoFunction($scope.canUndoRedo);
    $scope.numChronicle.addOnRedoFunction($scope.canUndoRedo);
    
    //Functions used by buttons
    $scope.increment1 = function(){
        $scope.num.value++;
    };
    $scope.increment5 = function(){
        $scope.num.value+= 5;
    };
    $scope.undo = function(){
        $scope.numChronicle.undo()
    };
    $scope.redo = function(){
        $scope.numChronicle.redo()
    };
});