var app = angular.module('myApp', ['rx']);
app.factory("DataService", function(rx) {
var subject = new rx.Subject();
var data = "Initial";
return {
set: function set(d){
data = d;
subject.onNext(d);
},
get: function get() {
return data;
},
subscribe: function (o) {
return subject.subscribe(o);
}
};
});
app.controller('updateCtrl', function(DataService){
var $ctrl = this;
$ctrl.update = function (v) {
DataService.set(v);
};
});
app.controller('displayCtrl', function(DataService) {
var $ctrl = this;
$ctrl.data = DataService.get();
var subscription = DataService.subscribe(function onNext(d) {
$ctrl.data = d;
});
this.$onDestroy = function() {
subscription.dispose();
};
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>RX AngularJS Example</title>
<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/rx/dist/rx.all.js"></script>
<script src="//unpkg.com/rx-angular/dist/rx.angular.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1>rx.angular Example</h1><hr>
<div ng-controller="updateCtrl as $ctrl1" >
<h1>Update</h1>
<input ng-model="$ctrl1.value">
<button ng-click="$ctrl1.update($ctrl1.value)">Update</button>
</div>
<hr>
<div ng-controller="displayCtrl as $ctrl2">
<h1>Display</h1>
<p>{{$ctrl2.data}}</p>
</div>
<hr>
</body>
</html>
body {
font-size: 10em;
}