<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>JavaScropt property change tracing</title>
</head>
<body ng-controller="ctrl as m">
<span>{{m.prop}}</span>
<input type="button" value="Change" ng-click="m.change()" />
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js"></script>
<script>
function watchPropSet(instance, prop, handler) {
var val = instance[prop],
getter = function () {
return val;
},
setter = function (newval) {
return val = handler.call(instance, newval, val);
};
if (delete instance[prop]) { // can't watch constants
if (Object.defineProperty) { // ECMAScript 5
Object.defineProperty(instance, prop, {
get: getter,
set: setter
});
}
else if (Object.prototype.__defineGetter__ &&
Object.prototype.__defineSetter__) //legacy
{
Object.prototype.__defineGetter__.call(instance, prop, getter);
Object.prototype.__defineSetter__.call(instance, prop, setter);
}
}
}
function unwatchPropSet(instance, prop) {
var val = instance[prop];
delete instance[prop]; // remove accessors
instance[prop] = val;
}
function ViewModel($scope) {
var self = this;
self.prop = "darkthread";
self.change = function() {
self.prop = "Jeffrey";
};
watchPropSet(self, "prop", function(newValue, oldValue) {
console.log("nv=" + newValue + ", ov=" + oldValue);
debugger;
});
}
angular.module("app", []).controller("ctrl", ViewModel);
</script>
</body>
</html>