在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被移除时移除监听

使用:

$scope.$on('$destroy', function() {
   Notifications.removeEventListener(Notifications.event.RISK_MEASURE_CHANGE, riskMeasureHandler);
});
c.addEventListener函数  -----------------  增加监听的地方,如果 notify 改变他的值就改变被改变,每次notify 每次都改变,立即改变。

使用:

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  --------  监听的事件名,唯一标识每一个事件。(在eventDispatcher 的 event 中定义)

定义:

RISK_MEASURE_CHANGE: 'PR_RISK_MEASURE_CHANGE',
使用:
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
          });
        }






  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值