Use listening (addEventListener) and AngularJs in angularjs

Use listening (addEventListener) and AngularJs in angularjs

Usage scope: subclass. js to pass values to the parent class. js or other pages. js

Let alone code first

1. Events. js

angular.module('pr.services')  .provider('Notifications',    function() {      //https://github.com/trochette/Angular-Design-Patterns-Best-Practices/blob/master/js/base/EventDispatcher.js      var eventDispatcher = {        _listeners: {},        _cache: {},        event: {          // account: object          ACCOUNT_CHANGE: 'PR_ACCOUNT_CHANGE',          //Risk Measures          RISK_MEASURE_CHANGE: 'PR_RISK_MEASURE_CHANGE',        },        addEventListener: function(type, listener, cache) {          if (!this._listeners[type]) {            this._listeners[type] = [];          }          this._listeners[type].push(listener);          if (cache && this._cache.hasOwnProperty(type)) {            listener.apply(null, this._cache[type]);          }        },        removeEventListener: function(type, listener) {          if (this._listeners[type]) {            var index = this._listeners[type].indexOf(listener);            if (index !== -1) {              this._listeners[type].splice(index, 1);            }          }        },        dispatchEvent: function() {          var listeners;          var data = arguments;          var type = arguments[0];          if (typeof type !== 'string') {            console.warn('EventDispatcher', 'First params must be an event type (String)');          } else {            // console.log(data);            listeners = this._listeners[type];            this._cache[type] = data;            if (listeners) {              listeners.forEach(function(listener) {                listener.apply(null, data);              });            }          }        },        getLastCalledValue: function(type) {          return this._cache.hasOwnProperty(type) ? this._cache[type] : [];        }      };      eventDispatcher.notify = eventDispatcher.dispatchEvent;      this.$get = function() {        return eventDispatcher;      };    });

Introduce the Code:

A. eventDispatcher. Policy Function ----------- notify riskMeasureHandler function when data changes.

Usage:

<span style="white-space:pre"></span>Notifications.notify(Notifications.event.RISK_MEASURE_CHANGE,$scope.riskMeasureAll);

B. removeEventListener function -------------- remove listener when scope is removed

Usage:

$scope.$on('$destroy', function() {   Notifications.removeEventListener(Notifications.event.RISK_MEASURE_CHANGE, riskMeasureHandler);});

C. addEventListener function ----------------- adds a listener. If listen y changes its value, it is changed. Every time notify changes, it changes immediately.

Usage:

var riskMeasureAllAfter;var riskMeasureHandler = function(ev, riskMeasureAll) {  riskMeasureAllAfter = riskMeasureAll;};Notifications.addEventListener(Notifications.event.RISK_MEASURE_CHANGE, riskMeasureHandler, true);$scope.$on('$destroy', function() {  Notifications.removeEventListener(Notifications.event.RISK_MEASURE_CHANGE, riskMeasureHandler);});

D. RISK_MEASURE_CHANGE -------- name of the event to be monitored, which uniquely identifies each event. (Defined in eventDispatcher's event)

Definition:

RISK_MEASURE_CHANGE: 'PR_RISK_MEASURE_CHANGE',

Usage:

Notifications.notify(Notifications.event.RISK_MEASURE_CHANGE,$scope.riskMeasureAll);

Note:

When the value is returned: the object should not only have the same value, but also be the same object. Use _. find to find the object.

        $scope.riskMeasureBefore = _.find($scope.riskMeasures, {          name: st.getRiskMeasure()        });        if(!riskMeasureAllAfter){          $scope.riskMeasure = $scope.riskMeasureBefore;        }        else{          //have same data ,but not the same object          $scope.riskMeasure = _.find($scope.riskMeasures, {            name: riskMeasureAllAfter.changed.name          });        }