首页 > 代码库 > 在AngularJs中使用监听(addEventListener)

在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 = http://www.mamicode.com/arguments;>


介绍一下代码:

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






在AngularJs中使用监听(addEventListener)