0

I am new to angular and might be missing some baselines. I am trying to bind my view to controller data as said here. If it is angular's all rage shouldn't be a complex situation. Here i have my app.js:

var app = angular.module('nwMetrics', []);

app.controller('MetricsController', ['$scope', function($scope){
    $scope.beanstalks = [{ time: "12:00", type: "beanstalk-stable" }];
    $.eventsource({
            label: "json-event-source",
            url: "/data/beanstalk",
            dataType: "json",
            open: function() {
                console.log( "opened connection" );
            },
            message: function( data ) {
                $scope.beanstalks.push(data);
                console.log( $scope.beanstalks );
                // $.eventsource("close", "json-event-source");
        }
    })

}]);

And there's my view:

<html lang="en" ng-app="nwMetrics">
...
<div ng-controller="MetricsController">
    <div class="env row" ng-repeat="beanstalk in beanstalks">
      <h3>
        {{beanstalk.time}}
        <em class="pull-right">{{beanstalk.type}}</em>
      </h3>
    </div>
</div>

Event source will receive SSE events and should push a new obj to $scope.beanstalks every second. The log on console shows what expected, a growing array printed every second, but the view is not - it shows only the initial value of $scope.beanstalks it stays static.

Also i've tried to move $.eventsource outside controller, but how would i call controller on js? app.controller('MetricsController').beanstalks or app.MetricsController.beanstalks are not helping. (This also might have a simple answer, but i can only find how to access it through html.)

Thanks in advance

Improve this question
2

2 Answers 2

Reset to default
1

If $.eventsource is some code that is external to AngularJS (not AngularJS service or something else injectable via AngularJS Dependency Injection), then this could work (I've added $scope.$apply() call):

var app = angular.module('nwMetrics', []);

app.controller('MetricsController', ['$scope', function($scope){
    var mcontroller = this
    $scope.beanstalks = [{ time: "12:00", type: "beanstalk-stable" }];
    $.eventsource({
            label: "json-event-source",
            url: "/data/beanstalk",
            dataType: "json",
            open: function() {
                console.log( "opened connection" );
            },
            message: function( data ) {

                $scope.$apply(function() {
                    $scope.beanstalks.push(data);
                    console.log( $scope.beanstalks );
                    // $.eventsource("close", "json-event-source");
                });                
        }
    })

}]);

Please let me know if this will work for your case.

What is $scope.$apply and we should use it here? Couple of links:

You could also use $scope.$digest() if you are sure that no parent scopes need update about $scope.beanstalks

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Both $digest and $apply approaches worked, thank you for your answer and links
1

I am guessing $.eventsource isn't using AngularJS? If so, Angular has no idea that $scope.beanstalks has changed.

So either add: $scope.$digest() at the end of your message callback to force Angular to update itself

Or (probably preferred): use the $http Angular service to interact with "/data/beanstalk" instead.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.