Skip to content

Instantly share code, notes, and snippets.

/index.html

Created March 3, 2016 06:58
Show Gist options
  • Save anonymous/aee5bac264c117de89f2 to your computer and use it in GitHub Desktop.
Save anonymous/aee5bac264c117de89f2 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/xeyibu
Raw
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
ul {
padding: 10px;
margin: 0;
font-size: 12px;
border: 1px solid #ccc;
color: #555;
}
ul li {
list-style: none;
border-bottom: 1px solid #cad;
}
ul li span {
font-size: 10px;
margin-left: 10px;
}
</style>
</head>
<body>
<div ng-controller="ctrl1">
<h1>Messages</h1>
<ul>
<li ng-repeat="m in msg">{{$index}}. {{m[0]}}<span>{{m[1]}}</span></li>
</ul>
</div>
<div ng-controller="ctrl2">
<h1>Messages</h1>
<ul>
<li ng-repeat="m in msg">{{$index}}. {{m[0]}}<span>{{m[1]}}</span></li>
</ul>
</div>
<script id="jsbin-javascript">
var app = angular.module('app', []);
app.controller('ctrl1', [ '$scope','myService2', function(scope, myService2) {
scope.msg= [];
var mine = myService2();
mine.on('a',function a(){
console.log('caller',a.caller.name);
scope.msg.push(['b1', arguments]);
});
var unregister = mine.on('a',function(){
scope.msg.push(['b2', arguments]);
});
mine.cacheAll(true);
mine.notify('a', 'first call on c1');
mine.on('a',function(){
scope.msg.push(['b3', arguments]);
});
unregister();
mine.notify('a', false, false, false);
mine.on('a',function(){
scope.msg.push(['b4', ['expecting false', arguments]]);
});
}]);
app.controller('ctrl2', [ '$scope','myService2', function(scope, myService2) {
var mine = myService2();
scope.msg= [];
mine.on('a',function(){
scope.msg.push(['a1', arguments]);
});
var unregister = mine.on('a',function(){
scope.msg.push(['a2', arguments]);
});
mine.cacheAll(true);
mine.notify('a', true, false, true);
mine.on('a',function(){
scope.msg.push(['a3', arguments]);
});
unregister();
mine.notify('a', false, false, false);
mine.on('a',function(){
scope.msg.push(['a4', ['expecting false', arguments]]);
});
}]);
app.service('myService2', [ function() {
return function() {
var observable = {
observers: {},
cached: {},
allcache: false,
on: function(event, listener) {
// Initialize array on first call to an event type
if (!this.observers.hasOwnProperty(event)) {
this.observers[event] = [];
}
// Push and keep the index for removal
var idx = this.observers[event].push(listener) -1;
// If event already fired and is cached (event will be called with the original arguments)
if (this.cached.hasOwnProperty(event)) {
//~ console.log(' ->>> Calling fired event: '+ event);
var args = this.cached[event];
listener.apply(this, args);
}
return (function(event, idx, that) {
// returning an unregister function
return function() {
delete(that.observers[event][idx]);
};
}(event, idx, this));
},
notify: function(event) {
var args = Array.prototype.slice.call(arguments, 1);
// Cache if event is cacheable
if (!this.cached.hasOwnProperty(event) && this.allcache) {
this.cached[event] = [];
}
if (this.cached.hasOwnProperty(event) || this.allcache) {
//~ console.log('adding a cached event ', args);
this.cached[event] = args;
}
// Notify the observers
if (!this.observers[event]) return;
this.observers[event].forEach(function (obs) {
obs.apply(this, args);
});
},
cache: function(event) {
// Add an array to save the event arguments
if (!this.cached.hasOwnProperty(event)) {
this.cached[event] = [];
}
},
cacheAll: function(cache) {
// Set a flag to cache all events
this.allcache = cache;
}
};
return observable;
};
}]);
</script>
<script id="jsbin-source-css" type="text/css">ul {
padding:10px;
margin:0;
font-size:12px;
border:1px solid #ccc;
color: #555;
li {
list-style:none;
border-bottom:1px solid #cad;
span {
font-size:10px;
margin-left:10px;
}
}
}</script>
<script id="jsbin-source-javascript" type="text/javascript">
var app = angular.module('app', []);
app.controller('ctrl1', [ '$scope','myService2', function(scope, myService2) {
scope.msg= [];
var mine = myService2();
mine.on('a',function a(){
console.log('caller',a.caller.name);
scope.msg.push(['b1', arguments]);
});
var unregister = mine.on('a',function(){
scope.msg.push(['b2', arguments]);
});
mine.cacheAll(true);
mine.notify('a', 'first call on c1');
mine.on('a',function(){
scope.msg.push(['b3', arguments]);
});
unregister();
mine.notify('a', false, false, false);
mine.on('a',function(){
scope.msg.push(['b4', ['expecting false', arguments]]);
});
}]);
app.controller('ctrl2', [ '$scope','myService2', function(scope, myService2) {
var mine = myService2();
scope.msg= [];
mine.on('a',function(){
scope.msg.push(['a1', arguments]);
});
var unregister = mine.on('a',function(){
scope.msg.push(['a2', arguments]);
});
mine.cacheAll(true);
mine.notify('a', true, false, true);
mine.on('a',function(){
scope.msg.push(['a3', arguments]);
});
unregister();
mine.notify('a', false, false, false);
mine.on('a',function(){
scope.msg.push(['a4', ['expecting false', arguments]]);
});
}]);
app.service('myService2', [ function() {
return function() {
var observable = {
observers: {},
cached: {},
allcache: false,
on: function(event, listener) {
// Initialize array on first call to an event type
if (!this.observers.hasOwnProperty(event)) {
this.observers[event] = [];
}
// Push and keep the index for removal
var idx = this.observers[event].push(listener) -1;
// If event already fired and is cached (event will be called with the original arguments)
if (this.cached.hasOwnProperty(event)) {
//~ console.log(' ->>> Calling fired event: '+ event);
var args = this.cached[event];
listener.apply(this, args);
}
return (function(event, idx, that) {
// returning an unregister function
return function() {
delete(that.observers[event][idx]);
};
}(event, idx, this));
},
notify: function(event) {
var args = Array.prototype.slice.call(arguments, 1);
// Cache if event is cacheable
if (!this.cached.hasOwnProperty(event) && this.allcache) {
this.cached[event] = [];
}
if (this.cached.hasOwnProperty(event) || this.allcache) {
//~ console.log('adding a cached event ', args);
this.cached[event] = args;
}
// Notify the observers
if (!this.observers[event]) return;
this.observers[event].forEach(function (obs) {
obs.apply(this, args);
});
},
cache: function(event) {
// Add an array to save the event arguments
if (!this.cached.hasOwnProperty(event)) {
this.cached[event] = [];
}
},
cacheAll: function(cache) {
// Set a flag to cache all events
this.allcache = cache;
}
};
return observable;
};
}]);
</script></body>
</html>
Raw
jsbin.xeyibu.css
ul {
padding: 10px;
margin: 0;
font-size: 12px;
border: 1px solid #ccc;
color: #555;
}
ul li {
list-style: none;
border-bottom: 1px solid #cad;
}
ul li span {
font-size: 10px;
margin-left: 10px;
}
Raw
jsbin.xeyibu.js
var app = angular.module('app', []);
app.controller('ctrl1', [ '$scope','myService2', function(scope, myService2) {
scope.msg= [];
var mine = myService2();
mine.on('a',function a(){
console.log('caller',a.caller.name);
scope.msg.push(['b1', arguments]);
});
var unregister = mine.on('a',function(){
scope.msg.push(['b2', arguments]);
});
mine.cacheAll(true);
mine.notify('a', 'first call on c1');
mine.on('a',function(){
scope.msg.push(['b3', arguments]);
});
unregister();
mine.notify('a', false, false, false);
mine.on('a',function(){
scope.msg.push(['b4', ['expecting false', arguments]]);
});
}]);
app.controller('ctrl2', [ '$scope','myService2', function(scope, myService2) {
var mine = myService2();
scope.msg= [];
mine.on('a',function(){
scope.msg.push(['a1', arguments]);
});
var unregister = mine.on('a',function(){
scope.msg.push(['a2', arguments]);
});
mine.cacheAll(true);
mine.notify('a', true, false, true);
mine.on('a',function(){
scope.msg.push(['a3', arguments]);
});
unregister();
mine.notify('a', false, false, false);
mine.on('a',function(){
scope.msg.push(['a4', ['expecting false', arguments]]);
});
}]);
app.service('myService2', [ function() {
return function() {
var observable = {
observers: {},
cached: {},
allcache: false,
on: function(event, listener) {
// Initialize array on first call to an event type
if (!this.observers.hasOwnProperty(event)) {
this.observers[event] = [];
}
// Push and keep the index for removal
var idx = this.observers[event].push(listener) -1;
// If event already fired and is cached (event will be called with the original arguments)
if (this.cached.hasOwnProperty(event)) {
//~ console.log(' ->>> Calling fired event: '+ event);
var args = this.cached[event];
listener.apply(this, args);
}
return (function(event, idx, that) {
// returning an unregister function
return function() {
delete(that.observers[event][idx]);
};
}(event, idx, this));
},
notify: function(event) {
var args = Array.prototype.slice.call(arguments, 1);
// Cache if event is cacheable
if (!this.cached.hasOwnProperty(event) && this.allcache) {
this.cached[event] = [];
}
if (this.cached.hasOwnProperty(event) || this.allcache) {
//~ console.log('adding a cached event ', args);
this.cached[event] = args;
}
// Notify the observers
if (!this.observers[event]) return;
this.observers[event].forEach(function (obs) {
obs.apply(this, args);
});
},
cache: function(event) {
// Add an array to save the event arguments
if (!this.cached.hasOwnProperty(event)) {
this.cached[event] = [];
}
},
cacheAll: function(cache) {
// Set a flag to cache all events
this.allcache = cache;
}
};
return observable;
};
}]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment