RxJs和Angular1组件 - 如何避免$ scope？

Question

具有RxJs的角度1.5分量的伪代码:

component('demo', {
  template: `<div>
            <div ng-if="verificationFailed">Sorry, failed to verify</div>
            <button ng-if="continueEnabled">Continue</button>
            <button ng-click="verify()">Verify</button>
            </div>`,
  controllerAs: 'ctrl',
  bindings: {
    someOptions: '='
  },
  controller: ($scope, someService) => {
    var ctrl = this;

    ctrl.continueEnabled = false;

    ctrl.verificationFailed = false;

    ctrl.verify = function() {
      Rx
      .Observable
      .interval(10 * 1000)
      .timeout(2 * 60 * 1000)
      .flatMapLatest(_ => { someService.verify(ctrl.someOptions.id)})
      .retry(1)
      .filter((result) => { result.completed })
      .take(1)
      .subscribe(_ => {
        $scope.$evalAsync(_ => {
          ctrl.continueEnabled = true
        });
      }, _ => {
        $scope.$evalAsync(() => {
          ctrl.verificationFailed = true;
        });
      });
    };
  }
});

有什么方法可以避免使用带有$ evalAsync的$ scope来触发摘要？没有它,视图根本就不会更新.
为什么？因为angular2上没有$ scope,我想让迁移变得尽可能简单

Answer 1

您可以使用angular1-async-filter.看看这篇好文章:http: //cvuorinen.net/2016/05/using-rxjs-observables-with-angularjs-1/

这是一个例子:

(function(angular) {
  var myComponent = (function () {
    function myComponent() {
      this.template = "<div><br/> Time: {{ctrl.time | async:this}}</div>";
      this.controllerAs = 'ctrl';
      this.controller = "myController";
    }
    return myComponent;
  }());

  var myController = (function() {
    function myController() {
      this.time = Rx.Observable.interval(1000).take(50);
    }
    return myController;
  }());

  angular.module('myApp', ['asyncFilter']);
  angular.module('myApp').component('myComponent', new myComponent());
  angular.module('myApp').controller('myController', myController);
})(window.angular);

看看它在Plunker上工作:https://plnkr.co/edit/80S3AG ？ p = preview