Skip to content

Instantly share code, notes, and snippets.

/index.html

Created December 4, 2015 06:19
Show Gist options
  • Save anonymous/3e042a2e2b5734745d3c to your computer and use it in GitHub Desktop.
Save anonymous/3e042a2e2b5734745d3c to your computer and use it in GitHub Desktop.
Download ZIP
Angular 1.x RxJS test Angular 1.x RxJS test // source https://jsbin.com/cequwu
Raw
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta name="description" content="Angular 1.x RxJS test">
<script src="https://npmcdn.com/@reactivex/[email protected]/dist/global/Rx.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<meta charset="utf-8">
<title>Angular 1.x RxJS test</title>
</head>
<body>
<ui-view></ui-view>
<script id="jsbin-javascript">
'use strict';
console.clear();
var process = { env: {} };
var TEMPLATE = ['<span>single value:</span>', '<p recompile="changed" use-boolean>', ' <span>{{singleValue}}</span>', '</p>', '<p>', '<span>list:</span>', '<div ng-repeat="item in list">', ' <span>{{item.value}}</span>', '</div>', '</p>'].join('\n');
angular.module('app', ['ui.router']).directive('recompile', recompile).config(routes);
function controller($scope) {
$scope.changed = false;
$scope.singleValue = null;
$scope.list = null;
$scope.$watch(onDigest);
$scope.$evalAsync(done);
console.log('num watchers: ' + getWatchCount());
Rx.Observable.interval(1000).take(5).map(createList).subscribe(onList);
function onList(list) {
$scope.list = list;
$scope.singleValue = list[0].value;
$scope.changed = true;
$scope.$apply();
$scope.$evalAsync(done);
}
function createList(x) {
return new Array(3).join(' ').split(' ').map(createItem);
}
function createItem(value, index) {
return {
id: index,
value: Math.random().toString().slice(-3)
};
}
function onDigest() {
console.log('DIGEST');
}
function getWatchCount() {
return Array.prototype.slice.call(document.getElementsByClassName('ng-scope')).reduce(eachScope, 0);
function eachScope(total, dom) {
var scope = angular.element(dom).scope();
return total + (scope.$$watchers ? scope.$$watchers.length : 0);
}
}
function done() {
console.log('-----');
}
}
function routes($stateProvider) {
$stateProvider.state('default', {
url: '',
template: TEMPLATE,
controller: controller
});
}
function recompile($parse) {
return {
transclude: true,
link: function link(scope, $el, attrs, ctrls, transclude) {
var previousElements;
compile();
function compile() {
transclude(scope, function (clone, clonedScope) {
// transclude creates a clone containing all children elements;
// as we assign the current scope as first parameter, the clonedScope is the same
previousElements = clone;
$el.append(clone);
});
}
function recompile() {
if (previousElements) {
previousElements.remove();
previousElements = null;
$el.empty();
}
compile();
}
scope.$watch(attrs.recompile, function (_new, _old) {
var useBoolean = attrs.hasOwnProperty('useBoolean');
if (useBoolean && (!_new || _new === 'false') || !useBoolean && (!_new || _new === _old)) {
return;
}
// reset kcdRecompile to false if we're using a boolean
if (useBoolean) {
$parse(attrs.recompile).assign(scope, false);
}
recompile();
});
}
};
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">console.clear();
var process = {env: {}};
var TEMPLATE = [
'<span>single value:</span>',
'<p recompile="changed" use-boolean>',
' <span>{{singleValue}}</span>',
'</p>',
'<p>',
'<span>list:</span>',
'<div ng-repeat="item in list">',
' <span>{{item.value}}</span>',
'</div>',
'</p>'
].join('\n');
angular.module('app', [
'ui.router'
])
.directive('recompile', recompile)
.config(routes);
function controller($scope) {
$scope.changed = false;
$scope.singleValue = null;
$scope.list = null;
$scope.$watch(onDigest);
$scope.$evalAsync(done);
console.log('num watchers: ' + getWatchCount());
Rx.Observable.interval(1000).take(5)
.map(createList)
.subscribe(onList);
function onList(list) {
$scope.list = list;
$scope.singleValue = list[0].value;
$scope.changed = true;
$scope.$apply();
$scope.$evalAsync(done);
}
function createList(x) {
return (new Array(3))
.join(' ')
.split(' ')
.map(createItem);
}
function createItem(value, index) {
return {
id : index,
value: Math.random().toString().slice(-3)
};
}
function onDigest() {
console.log('DIGEST');
}
function getWatchCount() {
return Array.prototype.slice.call(document.getElementsByClassName('ng-scope')).reduce(eachScope, 0);
function eachScope(total, dom) {
var scope = angular.element(dom).scope();
return total + (scope.$$watchers ? scope.$$watchers.length : 0);
}
}
function done() {
console.log('-----');
}
}
function routes($stateProvider) {
$stateProvider
.state('default', {
url : '',
template : TEMPLATE,
controller: controller
});
}
function recompile($parse) {
return {
transclude: true,
link: function link(scope, $el, attrs, ctrls, transclude) {
var previousElements;
compile();
function compile() {
transclude(scope, function(clone, clonedScope) {
// transclude creates a clone containing all children elements;
// as we assign the current scope as first parameter, the clonedScope is the same
previousElements = clone;
$el.append(clone);
});
}
function recompile() {
if (previousElements) {
previousElements.remove();
previousElements = null;
$el.empty();
}
compile();
}
scope.$watch(attrs.recompile, function(_new, _old) {
var useBoolean = attrs.hasOwnProperty('useBoolean');
if ((useBoolean && (!_new || _new === 'false')) || (!useBoolean && (!_new || _new === _old))) {
return;
}
// reset kcdRecompile to false if we're using a boolean
if (useBoolean) {
$parse(attrs.recompile).assign(scope, false);
}
recompile();
});
}
};
}</script></body>
</html>
Raw
jsbin.cequwu.js
'use strict';
console.clear();
var process = { env: {} };
var TEMPLATE = ['<span>single value:</span>', '<p recompile="changed" use-boolean>', ' <span>{{singleValue}}</span>', '</p>', '<p>', '<span>list:</span>', '<div ng-repeat="item in list">', ' <span>{{item.value}}</span>', '</div>', '</p>'].join('\n');
angular.module('app', ['ui.router']).directive('recompile', recompile).config(routes);
function controller($scope) {
$scope.changed = false;
$scope.singleValue = null;
$scope.list = null;
$scope.$watch(onDigest);
$scope.$evalAsync(done);
console.log('num watchers: ' + getWatchCount());
Rx.Observable.interval(1000).take(5).map(createList).subscribe(onList);
function onList(list) {
$scope.list = list;
$scope.singleValue = list[0].value;
$scope.changed = true;
$scope.$apply();
$scope.$evalAsync(done);
}
function createList(x) {
return new Array(3).join(' ').split(' ').map(createItem);
}
function createItem(value, index) {
return {
id: index,
value: Math.random().toString().slice(-3)
};
}
function onDigest() {
console.log('DIGEST');
}
function getWatchCount() {
return Array.prototype.slice.call(document.getElementsByClassName('ng-scope')).reduce(eachScope, 0);
function eachScope(total, dom) {
var scope = angular.element(dom).scope();
return total + (scope.$$watchers ? scope.$$watchers.length : 0);
}
}
function done() {
console.log('-----');
}
}
function routes($stateProvider) {
$stateProvider.state('default', {
url: '',
template: TEMPLATE,
controller: controller
});
}
function recompile($parse) {
return {
transclude: true,
link: function link(scope, $el, attrs, ctrls, transclude) {
var previousElements;
compile();
function compile() {
transclude(scope, function (clone, clonedScope) {
// transclude creates a clone containing all children elements;
// as we assign the current scope as first parameter, the clonedScope is the same
previousElements = clone;
$el.append(clone);
});
}
function recompile() {
if (previousElements) {
previousElements.remove();
previousElements = null;
$el.empty();
}
compile();
}
scope.$watch(attrs.recompile, function (_new, _old) {
var useBoolean = attrs.hasOwnProperty('useBoolean');
if (useBoolean && (!_new || _new === 'false') || !useBoolean && (!_new || _new === _old)) {
return;
}
// reset kcdRecompile to false if we're using a boolean
if (useBoolean) {
$parse(attrs.recompile).assign(scope, false);
}
recompile();
});
}
};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment