从工厂访问范围

Question

我以工厂为单身人士。 我想从该工厂访问控制器的范围。 归结为以下代码：

angular.module('foo', [])
.controller('fooCtrl', function($scope, testFac) {
    $scope.example = "I wanna change";

    testFac.change = function(change){
        $scope.example = change;
    }
})

.factory('testFac', function($timeout){
    var testFac= {}

    $timeout(function(){
        testFac.change("You changed")
    }, 3000)

    return testFac;
})

目前，我在控制器中声明了该功能，因为当时我在正确的范围内，我可以从工厂调用该功能。 但这似乎不是一个非常优雅的解决方案。 有更好的方法来解决这个问题吗？ 出于测试目的，请参阅此小提琴

Answer 1

我以工厂为单身人士

工厂/服务/提供者是单例

我想从该工厂访问控制器的范围。

在工厂内部使用示波器进行操作不是一个好习惯。 在角度范围内，控制器的作用域仅用于将View绑定到Controller。

关于您的代码：

.factory('testFac', function($timeout){
    var testFac= {}

    $timeout(function(){
        testFac.change("You changed")
    }, 3000)

    return testFac;
})

它不是工厂的目的。 您可以编写第二个控制器或指令

有没有更好的方法来解决这个问题？

是的，您可以使用$ broadcast

向所有子范围（及其子范围）向下分配事件名称，通知已注册的$ rootScope.Scope侦听器。

Answer 2

使用RxJS从服务推送值

我想避免使用广播

使用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, $timeout) {
  var subject = new rx.Subject(); 
  var data = "I wanna change";

  $timeout(function(){
      subject.onNext("You changed");
  }, 3000);

  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推送更改。

演示。

 angular.module('app', ['rx']) .factory("DataService", function(rx, $timeout) { var subject = new rx.Subject(); var data = "I wanna change"; $timeout(function(){ subject.onNext("You changed"); }, 3000); return { set: function set(d){ data = d; subject.onNext(d); }, get: function get() { return data; }, subscribe: function (o) { return subject.subscribe(o); } }; }) .controller('ctrl', function(DataService) { var $ctrl = this; $ctrl.data = DataService.get(); var subscription = DataService.subscribe(function onNext(d) { $ctrl.data = d; }); this.$onDestroy = function() { subscription.dispose(); }; })

 <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> <body ng-app="app" ng-controller="ctrl as $ctrl"> <h1>RxJS DEMO</h1> <p>Data= {{$ctrl.data}}</p> </body>

从工厂访问范围

问题描述

2 个解决方案

解决方案1
2 2017-10-18 12:26:31

解决方案2
0 2017-10-18 17:15:24

使用RxJS从服务推送值

演示。

从工厂访问范围

问题描述

2 个解决方案

解决方案1 2 2017-10-18 12:26:31

解决方案2 0 2017-10-18 17:15:24

使用RxJS从服务推送值

演示 。

解决方案1
2 2017-10-18 12:26:31

解决方案2
0 2017-10-18 17:15:24

演示。