Observer Pattern as a service for angularJS
JavaScript
Switch branches/tags
Nothing to show
Clone or download
unknown unknown
unknown and unknown readme edits
Latest commit 4db2fe9 Apr 2, 2015
Permalink
Failed to load latest commit information.
js added factory and readme Apr 2, 2015
LICENSE Initial commit Apr 2, 2015
README.md readme edits Apr 2, 2015

README.md

angular-observer-pattern

Observer Pattern as a service for angularJS Examples to follow

About

This is an angular factory which reflects the Observer Pattern it works well with the ControllerAs method of working as it can be much more efficient that $scope.$watch and more specific to a unique scope or object than $emit and $broadcast when used correctly.

Use Case: You would use this pattern to communicate between 2 controllers that use the same model but are not connected in anyway

How to use

Require, angularJS!

Methods

_observerService.attach = function(callback, event, id)

function adds a listener to an event with a callback which is stored against the event with it's corresponding id.

_observerService.detachById = function(id)

function removes all occurences of one id from all events in the observer object

_observerService.detachByEvent = function(event) most commonly used and least expensive

function removes all occurences of the event from the observer Object

_observerService.detachByEventAndId = function(event, id)

removes all callbacks for an id in a specific event from the observer object

_observerService.notify = function(event, parameters)

notifies all observers of a specific event, can pass a params variable of any type

Controller Example

Below example shows how to attach, notify and detach an event.

angular.module('app.controllers')
  .controller('ObserverExample',ObserverExample);
ObserverExample.$inject= ['ObserverService','$timeout'];
function ObserverExample(ObserverService, $timeout) {
    var vm = this;
    var id = 'vm1';
    ObserverService.attach(callbackFunction, 'let_me_know', id)
    
    function callbackFunction(params){
        console.log('now i know');
        ObserverService.detachByEvent('let_me_know')
    }
    
    $timeout(function(){
        ObserverService.notify('let_me_know');
    },5000);
}

Alternative way to remove event

angular.module('app.controllers')
  .controller('ObserverExample',ObserverExample);
ObserverExample.$inject= ['ObserverService','$timeout', '$scope'];
function ObserverExample(ObserverService, $timeout, $scope) {
    var vm = this;
    var id = 'vm1';
    ObserverService.attach(callbackFunction, 'let_me_know', id)
    
    function callbackFunction(params){
        console.log('now i know');
    }
    
    $timeout(function(){
        ObserverService.notify('let_me_know');
    },5000);
    
    // Cleanup listeners when this controller is destroyed
    $scope.$on('$destroy', function handler() {
        ObserverService.detachByEvent('let_me_know')
    });
}