RxJs und Angular1-Komponente - wie $ Scope zu vermeiden?

Question

Pseudo-Code für Winkel 1.5 Komponente mit RxJs:

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

Jede Art und Weise auszulösen zu verdauen mit $ Rahmen mit $ evalAsync zu vermeiden? Ohne sie wird die Ansicht einfach nicht aktualisiert.
Warum? Weil es keinen $ scope auf angular2 gibt und ich die Migration so einfach wie möglich machen möchte

Answer 1

Sie können angular1-async-filter verwenden. Werfen Sie einen Blick auf diesen guten Artikel: http://cvuorinen.net/2016/05/using-rxjs-observables-with-angularjs-1/

Hier ist ein Beispiel:

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

anzeigen arbeiten Plunker: https://plnkr.co/edit/80S3AG?p=preview