在AngularJs中使用监听（addEventListener）

标签：js   angularjs   addeventlistener   监听   

使用范围：子类.js给父类.js或者其他页面上.js传值

二话不说，先上代码

1、Notifications.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;
      };
    }
);

a. eventDispatcher.notify 函数 ----------- 当数据有改变的时候，通知riskMeasureHandler函数

使用：

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

使用：

     <span style="white-space:pre">		</span> $scope.$on('$destroy', function() {
        <span style="white-space:pre">	</span>   Notifications.removeEventListener(Notifications.event.RISK_MEASURE_CHANGE, riskMeasureHandler);
      <span style="white-space:pre">		</span> });

使用：

      <span style="white-space:pre">		</span>var riskMeasureAllAfter;

      <span style="white-space:pre">		</span>var riskMeasureHandler = function(ev, riskMeasureAll) {
        <span style="white-space:pre">		</span>riskMeasureAllAfter = riskMeasureAll;
      <span style="white-space:pre">		</span>};

      <span style="white-space:pre">		</span>Notifications.addEventListener(Notifications.event.RISK_MEASURE_CHANGE, riskMeasureHandler, true);
      <span style="white-space:pre">		</span>$scope.$on('$destroy', function() {
       <span style="white-space:pre">	</span> <span style="white-space:pre">		</span>Notifications.removeEventListener(Notifications.event.RISK_MEASURE_CHANGE, riskMeasureHandler);
      <span style="white-space:pre">		</span>});

d.RISK_MEASURE_CHANGE  --------  监听的事件名,唯一标识每一个事件。（在eventDispatcher 的 event 中定义）

定义：

          <span style="white-space:pre">	</span>RISK_MEASURE_CHANGE: 'PR_RISK_MEASURE_CHANGE',

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

注意：

当值回传时：对象不只是值相同，而且应该是同一个对象，先用_.find 找到

        $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
          });
        }

在AngularJs中使用监听（addEventListener）

标签：js   angularjs   addeventlistener   监听   

原文地址：http://blog.csdn.net/candy_home/article/details/41476697