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