在AngularJs中使用监听（addEventListener）

最新推荐文章于 2024-05-07 21:42:44 发布

Candy_home

最新推荐文章于 2024-05-07 21:42:44 发布

阅读量6.6k

点赞数

分类专栏： AngularJs 文章标签： js angularjs addEventListener 监听子类.js给父类.js或者其他页面上.j

本文链接：https://blog.csdn.net/Candy_home/article/details/41476697

版权

AngularJs 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

使用范围：子类.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
          });
        }