Chronicle Different Scopes Example

by Sam Maier

HTML

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

JavaScript

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

myApp.controller('ThisCtrl', function(Chronicle) {
    //variable initializtion
    this.num = 1;
    this.canUndo = false;
    this.canRedo = false;
    
    //Chronicle object creation
    this.numChronicle = Chronicle.record('num', this);
    this.canUndoRedo = function(){
        this.canUndo = this.numChronicle.canUndo();
        this.canRedo = this.numChronicle.canRedo();
    }.bind(this);
    this.numChronicle.addOnAdjustFunction(this.canUndoRedo);
    this.numChronicle.addOnUndoFunction(this.canUndoRedo);
    this.numChronicle.addOnRedoFunction(this.canUndoRedo);
    
    //Functions called by buttons
    this.increment1 = function(){
        this.num++;
    };
    this.increment5 = function(){
        this.num+= 5;
    };
    this.undo = function(){
        this.numChronicle.undo()
    };
    this.redo = function(){
        this.numChronicle.redo()
    };
});

myApp.controller('VMCtrl', function(Chronicle) {
    //variable initialization
    var vm = this;
    vm.num = 100;
    vm.canUndo = false;
    vm.canRedo = false;
    
    //Chronicle object creation
    vm.numChronicle = Chronicle.record('num', this);
    vm.canUndoRedo = function(){
        vm.canUndo = vm.numChronicle.canUndo();
        vm.canRedo = vm.numChronicle.canRedo();
    };
    vm.numChronicle.addOnAdjustFunction(vm.canUndoRedo);
    vm.numChronicle.addOnUndoFunction(vm.canUndoRedo);
    vm.numChronicle.addOnRedoFunction(vm.canUndoRedo);
    
    //Functions called by buttons
    vm.increment1 = function(){
        vm.num--
    };
    vm.increment5 = function(){
        vm.num-= 5;
    };
    vm.undo = function(){
        vm.numChronicle.undo()
    };
    vm.redo = function(){
        vm.numChronicle.redo()
    };
});