使用RxJS

Question

我有一个控制器（称之为＆＃34; A＆＃34;），我从网络服务器获取一个值。当我得到这个值时，我将它存储在服务中。

在另一个控制器中（称之为＆＃34; B＆＃34;）每次存储在服务中时，我都必须从服务中获取此值。此值必须出现在视图中（已更新）。

我通常的解决方案是：我每次将值存储在服务中时都会发出一个事件。然后在控制器B中我听这个事件，然后我从服务中获得价值。

我知道还有其他解决方案，例如范围。$ watch / apply但我不知道哪个更好。

你能告诉我哪种方式更好吗？

Answer 1

使用RxJS

推送服务中的值

$rootScope.broadcast的一个变化是使用RxJS Extensions for Angular构建服务：

<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>

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

客户可以使用DataService.subscribe订阅更改，生产者可以使用DataService.set推送更改。

DEMO on PLNKR。

Answer 2

每次$digest或$apply周期完成后，都会调用观察者。它对您的应用程序的影响比您正在进行的本地事件更具影响力。

如果您可以使用服务来控制指令和/或控制器之间的通信，那就更好了。

据我所知，有4种方法可以处理控制器和/或指令之间的通信：

使用服务（与您一样）
使用$apply

$watch

使用角度事件系统（使用scope.$emit或scope.$broadcast）
非常脏并使用全局变量

使用服务是最好的方法。特别是如果你处理＆＃34;一对一＆＃34;通信。

在AngularJs中更新另一个控制器中的变量的最佳方法

2 个答案:

使用RxJS