CODEWITHSUNDEEP
angularjsrxjs
user4217999
user4217999

Reputation:

How to bind the data to the template using rxjs and angular 1.6

I am tring to get the data using rxjs from promise method, and once it is success am subscribing it and passing it to my scope.

I can see the response object attached to my scope, but in UI, it is not getting mapped.

This is what I tried.

index html:

<html>

<head></head>


<body>

<my-component></my-component>

    <script src="rx.lite.js"></script>
    <script src="angular.min.js"></script>
    <script src="rx.angular.js"></script>
    <script src="app.js"></script>
    <script src="service.js"></script>
    <script src="component.js"></script>

</body>


</html>

app.js:

(function() {
    'use strict';
     angular.module('app', ['rx']);
})();

service.js:

;(function (undefined) {
    'use strict';
    angular.module('app').factory('myService', ['$http', '$q', 'rx',function($http, $q, rx) {

        function httpReq(configObj){
            var deferred = $http(configObj);
            return rx.Observable
            .fromPromise(deferred)
            .map(function(response){ return response.data; });
        }

        return {
            httpReq : httpReq
        }


    }]);
}.call(this));

component.js:

;(function (undefined) {
    'use strict';
    angular.module('app').component('myComponent', {
        templateUrl: "myComponent.tpl.html",
        controller: ['myService', 'rx', Ctrl]
    });

    function Ctrl(myService, rx) {

        var $ctrl = this;

        myService.httpReq({ url: ' http://localhost:3000/posts/1', method: 'GET'})
        .subscribe(function(val) {
            $ctrl.list = val;
        }.bind(this));

    }

}.call(this));

myComponent.tpl.html:

<div ng-if="$ctrl.list">{{$ctrl.list}}</div>

Upvotes: 1

Views: 156

Answers (1)

Nicolas S.
Nicolas S.

Reputation: 329

You have to call $apply() because $scope is modified outside of the $digest cycle (not sure though).

Upvotes: 1

Related Questions