JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<script src="http://code.angularjs.org/0.10.4/angular-0.10.4.min.js" ng:autobind></script>
<div ng:controller="App">
Renders: <r:counter></r:counter>
<button ng:click="digestTwice()">Execute Digest</button>
<div id="log"></div>
</div>
JavaScript
angular.service('renderCallback', function() {
var callbacks = [];
var scheduled = false;
this.$watch(function() {
if (!scheduled) {
// Can't use $defer since that'd cause
// another digest cycle.
setTimeout(execute, 0);
scheduled = true;
}
});
function execute() {
angular.forEach(callbacks, function(callback) {
callback();
});
scheduled = false;
}
return angular.bind(callbacks, callbacks.push);
});
// Code below here is just to show that this works.
angular.widget('r:counter', function() {
// Have to use angular.extend to get injection in a
// widget.
return angular.extend(function(renderCallback, element) {
var counter = 0;
element.html(0);
renderCallback(function() {
element.html(counter++);
});
}, {$inject: ['renderCallback']});
});
function App() {
var scope = this;
scope.x = 0;
scope.y = 0;
// This updates the model which triggers a watch
// causing two digests.
scope.digestTwice = function() {
scope.x++;
};
scope.$watch('x', function() {
scope.y++;
});
// In a real app don't touch DOM inside a controller.
// this is just a logging hack.
var digest = 0;
scope.$watch(function() {
// Can't use angular binding to track this or
// we'd cause infinite digest since it'd keep changing
document.getElementById('log').innerHTML =
'Digests: ' + (++digest);
});
}