在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);


b.removeEventListener函数 -------------- 在scope被移除时移除监听

使用:

     <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> });
c.addEventListener函数  -----------------  增加监听的地方,如果notify 改变他的值就改变被改变,每次notify 每次都改变,立即改变。

使用:

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






郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。