Angular with MooTools Controller

by mslocum

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<div ng-controller="GrandChild as gc">
    <button ng-click="gc.doStuff()">Do it</button>
    <p>Value: {{ gc.value }}</p>
</div>

JavaScript

// Mootools stuff
var Parent = new Class({
    Binds: ['add', 'getValue'],
    initialize: function(iVal){
        this.value = iVal || 0;
    },
    add: function(iVal){
        this.value += iVal;
    },
    getValue: function() {
        return this.value;
    }
});
var Child = new Class({
    Extends: Parent,
    Binds: ['add'],
    initialize: function(iVal){
        this.parent(iVal);
    },
    add: function(iVal){
        this.parent(this.value + iVal);
    }
});
var GrandChild = new Class({
    Extends: Child,
    Binds: ['add', 'doStuff'],
    initialize: function(iVal){
        this.parent(iVal);
    },
    doStuff: function() {
        this.add(1);
    },
    add: function(iVal){
        this.parent(this.value + iVal);
    }
});


// Start Angular stuff
var app = angular.module('myApp', []);