<div ng-app="app">
<div ng-controller="ca as vm">
<input type="number" min="1" max="9" ng-model="vm.num" ng-change="vm.translate(vm.num)" />
<p ng-bind="vm.text" />
</div>
<div ng-controller="cb as vm">
<input type="number" min="1" max="9" ng-model="vm.num" ng-change="vm.translate(vm.num)" />
<p ng-bind="vm.text" />
</div>
</div>
var app = angular.module("app", []);
app.controller('ca', CtrlA);
app.controller('cb', CtrlB);
app.factory('translator', Translator);
function TranslatingController(Translator) {
this.text = "";
this._Translator = Translator;
}
TranslatingController.prototype.translate = function(num) {
this.text = this._Translator.translate(num);
}
CtrlA.$inject = ['translator'];
function CtrlA(Translator) {
TranslatingController.call(this, Translator);
var vm = this;
vm.num = 1;
}
CtrlA.prototype = Object.create(TranslatingController.prototype);
CtrlB.$inject = ['translator'];
function CtrlB(Translator) {
TranslatingController.call(this, Translator);
var vm = this;
vm.num = 1;
}
CtrlB.prototype = Object.create(TranslatingController.prototype);
function Translator() {
return {
translate: translate
};
function translate(num) {
var res;
switch(num) {
case 0: res = "Zero"; break;
case 1: res = "One"; break;
case 2: res = "Two"; break;
case 3: res = "Three"; break;
case 4: res = "Four"; break;
case 5: res = "Five"; break;
case 6: res = "Six"; break;
case 7: res = "Seven"; break;
case 8: res = "Eight"; break;
case 9: res = "Nine"; break;
default: res = String(num); break;
}
return res;
}
}
This Pen doesn't use any external CSS resources.